Drag and Drop the mootools page for sorting and event conflict handling

Question: I have recently read some JS things. The project uses the Sortables of mootools to implement the page drag and drop sorting function. During this period, the sorting subitem RESPONSE event triggers a conflict. In fact, we have considered the issue of event conflicts during Sortables design. We provide handle attribute note... SyntaxHighlighter. all ();

Question:

Recently, I have read some JS things. The project uses the Sortables of mootools to implement the page drag and drop sorting function. During this period, the sorting subitem RESPONSE event triggers a conflict. In fact, when designing Sortables, we have considered the issue of event conflicts. We provide the handle attribute to register specific event monitoring objects, so as to avoid monitoring event conflicts. This document records and hopes to communicate with each other.

 

Abstract:

I. Implementation of drag-and-drop sorting-using mootools Sortables

Ii. Analysis of the Cause of page refresh-event conflict

Iii. solution provided by Sortables. handle

 

Body:

I. Implementation of drag-and-drop sorting-using mootools Sortables

Assume that the following drag-and-drop page (see Figure picture_1) isInternalAs the drag object, andColumn onYou may also need to handle some click events (such as the delete action or something ).

The page is wrapped in tables. The drag and drop elements are placed inIs not described in detail here, the approximate form is as follows:

[Html]
 
 
Show column 1 
Show column 2 
Show column 3 
Show column 4 
Show Column 5 
 
 
 
To bind the last column to a "delete" button, bind the onClick event to perform the delete action.

[Html]
/**
* Delete workstation-acquisition card
**/
Function deleteWorkStation (cardID, stationID ){
If (confirm ("are you sure you want to delete the wks acquisition card? ")){
Url = "../smc/SmcCaptureWorkStationDelete. do? CardID = "+ cardID +" & stationID = "+ stationID;
New Request. JSON ({
Url: url,
OnComplete: function (result, text ){
If ("deleted successfully! "! = Result. message)
Alert (result. message );
Document. mainForm. submit (); // refresh the page
}
}). Send ();
}
}
 

Mootools provides Sortables to easily implement drag-and-drop sorting on pages. You need to register the domready event and instantiate the Sortables object. You can specify the dom object to be dragged, some actions to be dragged, such as the selected color. The general code is as follows:

 

[Html]
/**
* Set the drag-and-drop sorting of www.2cto.com
**/
Window. addEvent ('domainready', function (){
Var dragSort = new Sortables ('sortables ',{
OnStart: function (element, clone ){
Element. setStyle ('background-color', 'red ');
},

OnSort: function (element, clone ){
Element. setStyle ('background-color', 'blue ');
},

OnComplete: function (element ){
Element. setStyle ('background-color ','');
Var cardIdStr = dragSort. serialize ();

// Update the display sequence of the acquisition card in the background
Url = "../smc/SortCaputureCards. do? CardIdStr = "+ cardIdStr;
New Request. JSON ({
Url: url,
OnComplete: function (result, text ){
If ("good" = result. message ){
JumpPage ( ); // Jump to refresh the current page
} Else {
Alert (result. message );
}
}
}). Send ();
}

});
 
});
The preceding'Sortables 'is the drag object.Drag and Drop. By the way, you can add methods such as onStart (), onSort (), and onComplete () to perform operations such as selecting and changing colors and updating Background Data. Sortables. serialize (); can list the ID strings of the current sequence. In this example, this string is used by the background method to update the corresponding records.

 

After the above operations are completed, the page can also be dragged, it was originally thought it was a problem. However, it was found that when you click "delete", the corresponding records were also deleted in the background, but the page was not refreshed. What's worse, the page was not refreshed after the drag-and-drop was completed.

 

Ii. Reasons for page refresh Problems

After some tests, the preliminary conclusion is that the page events are caused by conflicts. Specify the drag object as "Sortables" in the sortables object. By default, the entireThe mouseDown event in the region. The delete button separately defines the click event. When you click "delete", the events in Sortables will be executed, and the delete events to be deleted will also be executed. Specifically, both "onComplet ()" and "deleteWorkStation" must be executed, and both have an ajax callback Method for executing refresh. I don't know the specific execution sequence of IE, but it shows that there is a conflict between the two. I don't know which callback method is not executed.

The initial cause is that the page binding event is conflicted, specifically, the event scope monitored by Sortables coversClick Event. If you can change the range of monitoring events to be dragged, or remove a single click event, the problem can be solved.

Fortunately, mootools Sortables provides the handle option to specify the range of drag-and-drop monitoring events. The following describes the Sortables. handle option.

 

Iii. solution provided by Sortables. handle

The handle option accepts an element as the drag controller. If you want to keep the text in your list to be selected or keep other behaviors of li, It is very convenient to use this parameter. If the default parameter is false, the entire element (li) becomes the controller.

In this example, you can specify handle as the sequence number column and set the monitoring events of sortables to the sequence number column to avoid event conflicts.

For example:

[Html]
Var dragSort = new Sortables ('sortables ',{
Handle: ". sortHandel ",
OnStart: function (element, clone ){
Element. setStyle ('background-color', 'red ');
}
;
 

By looking at the JS source code of mootools Sortables, we can better understand how mootools is implemented. below is the JS snippet of Sortables, which specifies the monitoring of mouseDown events in the addItems method.

[Html]
AddItems: function (){
Array. flatten (arguments). each (function (element ){
This. elements. push (element );
Var start = element. retrieve ('sortables: start', function (event ){
This. start. call (this, event, element );
}. Bind (this ));
(This. options. handle? Element. getElement (this. options. handle) | element: element). addEvent ('mousedown', start );
}, This );
Return this;
},
We can see that if handle is specified, the mouseDown event is set on the handle element; otherwise, the entire element is used.

There are many other options provided by Sortables, so I will not talk about them here. If you are interested, you can study them yourself.

 

Conclusion:

Throughout the entire process, the biggest feeling is "Admire ". Admire the perfection of mootools Sortables in design. When you encounter a problem and find that someone else has considered and provided you with an option, you can only admire it. I have always had a poor word. I can't find a suitable expression. I just hope that my own things will be like that in the future, which makes people think that I have taken another step for him.

 

From the column tonight