The Sortables class also provides an excellent method called "serialize". Through this method, you can output the ids of these elements as arrays - very useful for server-side development. Next, we'll see how to create a new sorted item collection, and be sure to look at the final demo instance.
Basic knowledge
Create a new Sortable object
First, we want to assign the elements we want to sort to the variable. For Sortables, if you want elements between multiple lists to be able to drag and drop each other, you need to put all of these elements in an array, like this:
Reference code:
var sortableListsArray = $$('#listA, #listB');
This way, you can put the two ul ids into an array. We can now create a new sortable object from this array:
Reference code:
var sortableLists = new Sortables(sortableListsArray);
We assume that the following HTML is used:
Reference code:
<ul >
<li>Item A1</li>
<li>Item A2</li>
<li>Item A3</li>
<li>Item A4</li>
</ul>
<ul >
<li>Item B1</li>
<li>Item B2</li
<li>Item B3</li>
<li>Item B4</li>
</ul>
Our sortable list should look like this at the end:
Item A1
Item A2
Item A3
Item A4
Item B1
Item B2
Item B3
Item B4
Sortables options
If you want to fully 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 uls.
For example, if you have two uls in a sortable object, you can set the option "constain:true" to "constrain" the elements of the list are only allowed to move within their parent ul.
Reference code:
var sortableLists = new Sortables(sortableListsArray, {
constrain: false // Default is false
});
clone
Default - false
The clone option allows you to add a "clone" element to follow your mouse while leaving the original element in place. You can see how to use the clone option from the following example:
Reference code:
var sortableLists = new Sortables(sortableListsArray, {
clone: true // Default is false
});
handle
Default - false
The handler option can accept an element as the dragged controller. If you want to keep the text in your list that can be selected or other behaviors of li, it is very convenient to use this parameter. The default parameter is false, which will make the entire element (li) the controller.
Reference code:
var handleElements = $$('.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
handle: handleElements // Default is false
});
opacity
Default-1
The opacity option allows you to adjust sorting elements. If you use a copy of clone, opacity will act on this sorting element, rather than the copy that is more appropriate to your mouse.
Reference code:
var sortableLists = new Sortables(sortableListsArray, {
opacity: 1 // Default is 1
});
revert
Default - false
The revert parameter can accept the option value of "false" or Fx. If you set the Fx option for the revert parameter, the corresponding Fx setting will be applied when the element is placed in a position. For example, you can set "duration:long", so when you release the mouse, the cloned object will return to its position within this time. If you want to see the effect of revert, you can take a look at the following example:
Reference code:
var sortableLists = new Sortables(sortableListsArray, {
revert: false // Default is false
});
// You can also set it to 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 will be dragged.
Reference code:
var sortableLists = new Sortables(sortableListsArray, {
snap: 10 // The user needs to drag 10px to start dragging this drag list
});
Sortable Events
The sortable event is very good and very simple and easy to use. Each passes the currently dragged element (if you use the colone element, it is not the clone element, but the original element).
onStart - Triggered when the drag starts (after snap triggers)
onSort - Triggered when the item changes sorting
onComplete - Triggered when you put an element down
We will look at these events carefully later (you can see the effect in the examples later).
Sortable method
Although we have used many methods, we have never discussed them in detail. Methods are essentially some functions, but they belong to a certain class. However, when we talk about classes, we will establish a common concept for the second time. This plugin (like other plugins we have talked about) all follow a similar pattern - initialize a plugin with "new", define one or more selector parameters, define your options, and add some events (similar to creating new sortables and tween). This pattern is the basis of the class. The most basic thing about a class is that it allows you to save some options and functions so that you can reuse them. A method is some specific functions in a class. The .set() and .get() methods of the instance are the attribute extension methods of element. In, .start() is a method. For a clearer understanding, let's take a look at the sortable method.
.detach();
With the .detach(); method, you can strip (detach) all controllers so that the entire list cannot be dragged. This is very useful for disabling drag.
.attach();
This method will associate the controller with the sorting item, and the sorting function can be activated 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 sorting list where users can add new items to it. Once you add a new item, you need to start the sorting feature on that new item.
.removeItems();
This method allows you to delete some elements from the existing sorted list. It is very useful when you need to lock some special items in the sort list to prevent it from participating in sorting.
.addLists();
In addition to adding a new item to an already existing sorted list, you may also want to add a new list to the sorted list. The .addLists(); method allows you to add multiple lists, which makes it really easy to add multiple sorted objects.
.removeLists();
This allows you to remove the entire list from the sorted object. This is useful when you need to lock some special lists. You can remove a list, and other items that are retained can continue to be sorted, but the removed list will be locked.
.serialize();
This sorting function is excellent, but what if you want to process this data? The .serialize(); method returns an array containing the ids of these items in their order. You can select the list of data you want to get by indexing.
The influence of methods is far more than what we cover here. If you are a newbie, let this be a simple concept introduction. We will discuss methods and classes in more depth in the later tutorial.
Code Example
The following example uses some options, all events and all methods described above. I hope this code is self-explanatory and there are no more explanations in the comments. Remember, all the following things must be in the domready event.
Reference code:
var sortableListsArray = $$('#numberlist, #letterlist');
var sortableLists = new Sortables(sortableListsArray, {
// When I move, copy a copy and follow the mouse
clone: true,
// Define the css class name of the drag controller (handle, handle)
handle: '.handle',
// After dragging, allow you to use special effects to get it back to a certain position
revert: {
// Accept Fx option
duration: 50
},
// Determine the opacity of dragging elements instead of following the copy of the mouse
opacity: .5,
onStart: function(el){
// What is passed is the element you are dragging
$('start_ind').highlight('#F3F865');
('#F3F865');
},
onSort: function(el) {
// What is passed is the element you are dragging
$('sort_ind').highlight('#F3F865');
},
onComplete: function(el) {
// What is passed is the element you are dragging
$('complete_ind').highlight('#F3F865');
var listOne = (0);
var listTwo = (1);
$('numberOrder').set('text', listOne).highlight('#F3F865'); ;
$('letterOrder').set('text', listTwo).highlight('#F3F865'); ;
}
}).detach(); // Disable the controller, so you have to click the buttons to make them dragged
var addListoSort = $('addListTest');
$('addListButton').addEvent('click', function(){
(addListoSort);
});
$('removeListButton').addEvent('click', function(){
(addListoSort);
});
$('enable_handles').addEvent('click', function(){
();
});
$('disable_handles').addEvent('click', function(){
();
});
var itemOne = $('one');
$('add_item').addEvent('click', function(){
(itemOne);
});
$('remove_item').addEvent('click', function(){
(itemOne);
});
The controller is not enabled by default (check the above code carefully). To start dragging sorting, you need to click the "Enable Sort" button.
Basic knowledge
Create a new Sortable object
First, we want to assign the elements we want to sort to the variable. For Sortables, if you want elements between multiple lists to be able to drag and drop each other, you need to put all of these elements in an array, like this:
Reference code:
Copy the codeThe code is as follows:
var sortableListsArray = $$('#listA, #listB');
This way, you can put the two ul ids into an array. We can now create a new sortable object from this array:
Reference code:
Copy the codeThe code is as follows:
var sortableLists = new Sortables(sortableListsArray);
We assume that the following HTML is used:
Reference code:
Copy the codeThe code is as follows:
<ul >
<li>Item A1</li>
<li>Item A2</li>
<li>Item A3</li>
<li>Item A4</li>
</ul>
<ul >
<li>Item B1</li>
<li>Item B2</li
<li>Item B3</li>
<li>Item B4</li>
</ul>
Our sortable list should look like this at the end:
Item A1
Item A2
Item A3
Item A4
Item B1
Item B2
Item B3
Item B4
Sortables options
If you want to fully 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 uls.
For example, if you have two uls in a sortable object, you can set the option "constain:true" to "constrain" the elements of the list are only allowed to move within their parent ul.
Reference code:
Copy the codeThe code is as follows:
var sortableLists = new Sortables(sortableListsArray, {
constrain: false // Default is false
});
clone
Default - false
The clone option allows you to add a "clone" element to follow your mouse while leaving the original element in place. You can see how to use the clone option from the following example:
Reference code:
Copy the codeThe code is as follows:
var sortableLists = new Sortables(sortableListsArray, {
clone: true // Default is false
});
handle
Default - false
The handler option can accept an element as the dragged controller. If you want to keep the text in your list that can be selected or other behaviors of li, it is very convenient to use this parameter. The default parameter is false, which will make the entire element (li) the controller.
Reference code:
Copy the codeThe code is as follows:
var handleElements = $$('.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
handle: handleElements // Default is false
});
opacity
Default-1
The opacity option allows you to adjust sorting elements. If you use a copy of clone, opacity will act on this sorting element, rather than the copy that is more appropriate to your mouse.
Reference code:
Copy the codeThe code is as follows:
var sortableLists = new Sortables(sortableListsArray, {
opacity: 1 // Default is 1
});
revert
Default - false
The revert parameter can accept the option value of "false" or Fx. If you set the Fx option for the revert parameter, the corresponding Fx setting will be applied when the element is placed in a position. For example, you can set "duration:long", so when you release the mouse, the cloned object will return to its position within this time. If you want to see the effect of revert, you can take a look at the following example:
Reference code:
Copy the codeThe code is as follows:
var sortableLists = new Sortables(sortableListsArray, {
revert: false // Default is false
});
// You can also set it to 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 will be dragged.
Reference code:
Copy the codeThe code is as follows:
var sortableLists = new Sortables(sortableListsArray, {
snap: 10 // The user needs to drag 10px to start dragging this drag list
});
Sortable Events
The sortable event is very good and very simple and easy to use. Each passes the currently dragged element (if you use the colone element, it is not the clone element, but the original element).
onStart - Triggered when the drag starts (after snap triggers)
onSort - Triggered when the item changes sorting
onComplete - Triggered when you put an element down
We will look at these events carefully later (you can see the effect in the examples later).
Sortable method
Although we have used many methods, we have never discussed them in detail. Methods are essentially some functions, but they belong to a certain class. However, when we talk about classes, we will establish a common concept for the second time. This plugin (like other plugins we have talked about) all follow a similar pattern - initialize a plugin with "new", define one or more selector parameters, define your options, and add some events (similar to creating new sortables and tween). This pattern is the basis of the class. The most basic thing about a class is that it allows you to save some options and functions so that you can reuse them. A method is some specific functions in a class. The .set() and .get() methods of the instance are the attribute extension methods of element. In, .start() is a method. For a clearer understanding, let's take a look at the sortable method.
.detach();
With the .detach(); method, you can strip (detach) all controllers so that the entire list cannot be dragged. This is very useful for disabling drag.
.attach();
This method will associate the controller with the sorting item, and the sorting function can be activated 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 sorting list where users can add new items to it. Once you add a new item, you need to start the sorting feature on that new item.
.removeItems();
This method allows you to delete some elements from the existing sorted list. It is very useful when you need to lock some special items in the sort list to prevent it from participating in sorting.
.addLists();
In addition to adding a new item to an already existing sorted list, you may also want to add a new list to the sorted list. The .addLists(); method allows you to add multiple lists, which makes it really easy to add multiple sorted objects.
.removeLists();
This allows you to remove the entire list from the sorted object. This is useful when you need to lock some special lists. You can remove a list, and other items that are retained can continue to be sorted, but the removed list will be locked.
.serialize();
This sorting function is excellent, but what if you want to process this data? The .serialize(); method returns an array containing the ids of these items in their order. You can select the list of data you want to get by indexing.
The influence of methods is far more than what we cover here. If you are a newbie, let this be a simple concept introduction. We will discuss methods and classes in more depth in the later tutorial.
Code Example
The following example uses some options, all events and all methods described above. I hope this code is self-explanatory and there are no more explanations in the comments. Remember, all the following things must be in the domready event.
Reference code:
Copy the codeThe code is as follows:
var sortableListsArray = $$('#numberlist, #letterlist');
var sortableLists = new Sortables(sortableListsArray, {
// When I move, copy a copy and follow the mouse
clone: true,
// Define the css class name of the drag controller (handle, handle)
handle: '.handle',
// After dragging, allow you to use special effects to get it back to a certain position
revert: {
// Accept Fx option
duration: 50
},
// Determine the opacity of dragging elements instead of following the copy of the mouse
opacity: .5,
onStart: function(el){
// What is passed is the element you are dragging
$('start_ind').highlight('#F3F865');
('#F3F865');
},
onSort: function(el) {
// What is passed is the element you are dragging
$('sort_ind').highlight('#F3F865');
},
onComplete: function(el) {
// What is passed is the element you are dragging
$('complete_ind').highlight('#F3F865');
var listOne = (0);
var listTwo = (1);
$('numberOrder').set('text', listOne).highlight('#F3F865'); ;
$('letterOrder').set('text', listTwo).highlight('#F3F865'); ;
}
}).detach(); // Disable the controller, so you have to click the buttons to make them dragged
var addListoSort = $('addListTest');
$('addListButton').addEvent('click', function(){
(addListoSort);
});
$('removeListButton').addEvent('click', function(){
(addListoSort);
});
$('enable_handles').addEvent('click', function(){
();
});
$('disable_handles').addEvent('click', function(){
();
});
var itemOne = $('one');
$('add_item').addEvent('click', function(){
(itemOne);
});
$('remove_item').addEvent('click', function(){
(itemOne);
});
The controller is not enabled by default (check the above code carefully). To start dragging sorting, you need to click the "Enable Sort" button.
More learning
Reference reading documentThis section about sortable。
Download a zip package with everything you need to start
Includes the core library and extended (more) library for MooTools 1.2, the example above, an external JavaScript file, a simple HTML page, and a CSS file.