The Sortables class also provides an excellent way to include a name called "Serialize", by which you can output the IDs of these elements as arrays-useful for server-side development. Next, let's take a look at how to create a new set of sorted items, and make sure to look at the last demo example.
Basic knowledge
Create a new sortable object
First, we're going to assign the elements we want to sort to variables. For Sortables, if you want the elements between multiple lists to drag between each other, you need to put all of these elements in an array, like this:
Reference code:
Copy Code code as follows:
var Sortablelistsarray = $$ (' #listA, #listB ');
So you can put two UL ID into an array. We can now create a new sortable object from this array:
Reference code:
Copy Code code as follows:
var sortablelists = new Sortables (Sortablelistsarray);
We assume that the following HTML is used:
Reference code:
Copy Code code as follows:
<ul id= "Lista" >
<li>item a1</li>
<li>item a2</li>
<li>item a3</li>
<li>item a4</li>
</ul>
<ul id= "Listb" >
<li>item b1</li>
<li>item b2</li
<li>item b3</li>
<li>item b4</li>
</ul>
Our sortable list finally looks like this:
Item A1
Item A2
Item A3
Item A4
Item B1
Item B2
Item B3
Item B4
Sortables Options
If you want to completely define your own sortable list, you need to use these options.
Constrain
Default--false
This option determines whether your sortable list element can be dragged between multiple ul.
For example, if you have two UL in a sortable object, you can set the option "Constain:true" to "limit" (constrain) the elements of the list to only allow movement within their parent node, UL.
Reference code:
Copy Code code as follows:
var sortablelists = new Sortables (Sortablelistsarray, {
Constrain:false//default to False
});
Clone
Default--false
The Clone option allows you to add a "clone" element that follows your mouse movement and leaves the original element in place. You can see how to use the Clone option in the following example:
Reference code:
Copy Code code as follows:
var sortablelists = new Sortables (Sortablelistsarray, {
Clone:true//default to False
});
Handle
Default--false
The handler option can accept an element as a drag controller. Using this parameter is convenient if you want to keep the text in your list to be selected or to retain the other behavior of Li. A default parameter of false causes the entire element (LI) to become a controller.
Reference code:
Copy Code code as follows:
var handleelements = $$ ('. Handlesclass ');
var sortablelists = new Sortables (Sortablelistsarray, {
Handle:handleelements//default to False
});
Opacity
Default--1
The Opacity (Opacity) option allows you to adjust the sorting element. If you use a clone copy, opacity will work on this sort element, not the copy of your mouse.
Reference code:
Copy Code code as follows:
var sortablelists = new Sortables (Sortablelistsarray, {
Opacity:1//default is 1
});
Revert
Default--false
The undo (revert) parameter can accept the option value "false" or FX. If you set the FX option for the revert parameter, the corresponding FX settings are applied when the element is placed in a location. For example, you can set the "Duration:long" so that when you release the mouse, the cloned object will return to its position within that time. If you want to see the effect of revert, you can look at the following example:
Reference code:
Copy Code code as follows:
var sortablelists = new Sortables (Sortablelistsarray, {
Revert:false//default to False
});
You can also set the FX option
var sortablelists = new Sortables (Sortablelistsarray, {
revert: {
Duration:50
}
});
Snap
Default--4
The snap parameter allows you to set how many pixels the mouse must drag before the element is dragged.
Reference code:
Copy Code code as follows:
var sortablelists = new Sortables (Sortablelistsarray, {
SNAP:10//Users need to drag 10px to start dragging this drag list
});
Sortable events
Sortable events are very good and very easy to use. Each will pass the currently dragged element (if you use the Colone element, not the clone element, but the original element).
onstart--when drag starts (when snap is triggered)
onsort--triggers when the item changes the sort
oncomplete--when you put an element down and trigger
We'll look at these events later (you can see the effect in the later example).
Sortable method
Although we have used many methods, we have never talked about them in detail. Methods are essentially functions, but they belong to one class. But when we're talking about classes, we're going to build a common concept for the second time. This plugin (like any other plug-ins we've talked about) follows a similar pattern--using "new" to initialize a plugin, define one or more selector parameters, define your options, and add some events (similar to creating new sortable and tween). This pattern is the basis of the class. A class is based on allowing you to save some options and functions so that you can reuse them. The method is a certain function within a class. The. Set () and. Get () Methods of the instance are the attribute extension methods of the element. In Fx.tween,. Start () is a method. For a clearer understanding, let's look at the sortable approach.
. Detach ();
By using the. Detach () method, you can split (detach) all the controllers so that the entire list cannot be dragged. This is useful for disabling drag.
. Attach ();
This method associates the controller with the sort item, and you can start the sorting function again after using the. Detach () method.
. Additems ();
This method allows you to add new items to your sorted list. This means that you have a row list, users can add new items to it, once you add a new project, you need to start the sorting function on that new project.
. Removeitems ();
This method allows you to remove some elements from an existing sorted list. It is useful when you need to lock some of the special items in the sorted list and not let it participate in the sort.
. addlists ();
In addition to adding a new item to an already existing sorted list, you may want to add a new list to the sorted list. Addlists () method lets you add multiple lists, which makes it really easy to add multiple sort objects.
. removelists ();
Allows you to remove the entire list from the Sort object. This is useful when you need to lock up some special lists. You can remove a list, and other items that remain can be sorted, but the removed list will be locked.
. Serialize ();
This sort of sorting function is excellent, but what if you want to process the data? Serialize () method returns an array containing the ID of the items in their order. You can select the list of data you want to get by index values.
The impact of the method is far greater than what we have covered here, if you are a novice, let this be a simple introduction to the concept, we will in the next tutorial more in-depth discussion of methods and classes.
code example
The following example uses a number of options, all events, and all of the methods described above. I want this code to be self explanatory and more descriptive in a few comments. Remember, all the things below must be in the Domready event.
Reference code:
Copy Code code as follows:
var Sortablelistsarray = $$ (' #numberlist, #letterlist ');
var sortablelists = new Sortables (Sortablelistsarray, {
When I move, copy a copy to follow the mouse movement
Clone:true,
Define a CSS class name for the drag controller (handle, knob)
Handle: '. Handle ',
After dragging, allow you to use special effects to get it back to a location
revert: {
Accept FX Options
Duration:50
},
Determines the opacity of the dragged element instead of following a copy of the mouse
Opacity:. 5,
Onstart:function (EL) {
Passing is the element you are dragging
$ (' Start_ind '). Highlight (' #F3F865 ');
El.highlight (' #F3F865 ');
},
Onsort:function (EL) {
Passing is the element you are dragging
$ (' Sort_ind '). Highlight (' #F3F865 ');
},
Oncomplete:function (EL) {
Passing is the element you are dragging
$ (' Complete_ind '). Highlight (' #F3F865 ');
var listone = sortablelists.serialize (0);
var listtwo = sortablelists.serialize (1);
$ (' Numberorder '). Set (' text ', Listone). Highlight (' #F3F865 ')
$ (' Letterorder '). Set (' text ', Listtwo). Highlight (' #F3F865 ')
}
}). Detach (); Disable the controller so you have to click the button to make it drag
var addlistosort = $ (' addlisttest ');
$ (' Addlistbutton '). Addevent (' click ', function () {
Sortablelists.addlists (Addlistosort);
});
$ (' Removelistbutton '). Addevent (' click ', function () {
Sortablelists.removelists (Addlistosort);
});
$ (' enable_handles '). Addevent (' click ', function () {
Sortablelists.attach ();
});
$ (' disable_handles '). Addevent (' click ', function () {
Sortablelists.detach ();
});
var ItemOne = $ (' one ');
$ (' Add_item '). Addevent (' click ', function () {
Sortablelists.additems (ItemOne);
});
$ (' Remove_item '). Addevent (' click ', function () {
Sortablelists.removeitems (ItemOne);
});
The controller is not enabled by default (take a closer look at the code above). To start dragging the sort, you need to click the "Enable Sort" button.
Learn More
Refer to the section on sortable in the reading documentation.
Download a Zip package that contains everything you need to start
Includes the MooTools 1.2 core library and extended (more) libraries, examples above, an external JavaScript file, a simple HTML page and a CSS file.
