Mootools 1.2 Tutorial Introduction to Sorting Classes and Methods

The Sortables class also provides an excellent method called "serialize", through which you can output the IDs of these elements as an array - very useful for server-side development. Next, we'll look at how to create a new collection of sorted items, and be sure to take a look at the demo at the end.
Basic knowledge
Create a new Sortable object
First, we need to assign the elements we want to sort to variables. For Sortables, if you want elements between multiple lists to be draggable between each other, you need to put all these elements in an array, like this:
Reference code:

Copy code The code is as follows:

var sortableListsArray = $$('#listA, #listB');

In 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 code The code is as follows:

var sortableLists = new Sortables(sortableListsArray);

We assume that the following HTML is used:
Reference code:

Copy code The code is as follows:

 
Item A1< /li> 
Item A2

Item A3

Item A4

Item B1

Item B2
Item B3
Item B4

Our sortable list should probably look like this in the end:
Item A1
Item A2
Item A3
Item A4
Item B1
Item B2
Item B3
Item B4

Sortables option
if you want to fully define For your own sortable list, you'll need to use these options.
constrain
Default - false
This option determines whether your sortable list elements can be dragged between multiple uls.
For example, if you have two uls in a sortable object, you can "constrain" the elements of the list to only allow movement within their parent node ul by setting the option "constain:true".
Reference code:

Copy code The 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 " The cloned element follows your mouse movement, leaving the original element in place. You can see how to use the clone option from the following example:
Reference code:

Copy code The code is as follows:

 
var sortableLists = new Sortables(sortableListsArray, { 
clone: ​​true // Default is false 
}); 

handle
Default—— false
handler option can accept an element as the dragging controller. This parameter is very convenient if you want to keep the text in your list selectable or retain other behaviors of li. The default parameter is false, which makes the entire element (li) a controller.
Reference code:

Copy code The 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 the sorted elements. If you use a clone, the opacity will be applied to the sorted element, not the copy closer to your mouse pointer.
Reference code:

Copy code The code is as follows:

 
var sortableLists = new Sortables(sortableListsArray, { 
opacity: 1 // Default is 1 
}); 

revert
Default - false
The revert parameter can accept "false" or the option value of Fx. If you set the Fx option for the revert parameter, the corresponding Fx settings will be applied when the element is placed at a position. For example, you can set "duration:long" so that when you release the mouse, the cloned object will return to its location within this time. If you want to see the effect of revert, you can take a look at the following example:
Reference code:

Copy code The code is as follows:

 
var sortableLists = new Sortables(sortableListsArray, { 
revert: false // Default is false 
}); 
// You can also set it as 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 The code is as follows:

 
var sortableLists = new Sortables( sortableListsArray, { 
snap: 10 // The user needs to drag 10px to start dragging this drag list
}); 

Sortable event
The sortable event is very nice and very simple to use. Each one will be passed the currently dragged element (if you used a colon element, not the cloned element, but the original element).
onStart - Triggered when dragging starts (after snap triggers)
onSort - Triggered when items change order
onComplete - Triggered when you drop an element
We will Take a closer look at these events later (you can see the effect in later examples).
Sortable method
Although we have used many methods, we have never talked about them in detail. Methods are essentially functions, but they belong to a certain class. But when we talk about classes, we will establish a general concept for the second time. This plugin (like the others we've talked about) all follows a similar pattern - initialize a plugin with "new", define one or more selector parameters, define your options, add some events (and create The new sortable is similar to tween). This pattern is the basis of classes. At its most basic, a class allows you to save some options and functions so that you can reuse them. Methods are specific functions in a class. The .set() and .get() methods of the instance are the attribute extension methods of element. In Fx.Tween, .start() is a method. For a clearer understanding, let's look at the sortable method.
.detach();
With the .detach(); method, you can detach all controllers, making the entire list undragable. This is useful for disabling dragging.
.attach();
This method will associate the controller to the sorting 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. What this means is that you have a sorted list that the user can add new items to, and once you add a new item, you need to enable the sorting functionality on that new item.
.removeItems();
This method allows you to remove some elements from an existing sorted list. This is useful when you need to lock some special items in a sorted list so they don't participate in sorting.
.addLists();
In addition to adding a new item to an existing sorted list, you may also want to add a new list to the sorted list. The .addLists(); method lets you add multiple lists, which makes adding multiple sort objects really easy.
.removeLists();
allows you to remove entire lists from the sorted object. This is useful when you need to lock some special lists. You can remove a list and the remaining items will continue to be sorted, but the removed list will be locked.
.serialize();
This sorting function is very good, but what if you want to process this data? The .serialize(); method will return an array containing these item IDs in their order. You can select the list you want to get data from by the index value.
The impact of methods goes far beyond what we can cover here, if you are new to this then let this serve as a simple introduction to the concept, we will discuss methods and classes in more depth in later tutorials.
Code Example
The following example uses some options, all events and all methods described above. I hope this code is self-explanatory, with less comments and more explanations. Remember, everything below must be inside the domready event.
Reference code:

Copy code The code is as follows:

 
var sortableListsArray = $$('#numberlist, #letterlist'); 
var sortableLists = new Sortables(sortableListsArray, { 
// 이동할 때 마우스 움직임을 따라가도록 복사합니다. 
clone: ​​​​true, 
// 드래그 컨트롤러의 CSS 클래스 이름을 정의합니다(handle, handler) 
handle: '.handle', 
// 이후 특수 효과를 사용할 수 있습니다. 드래그 특정 위치로 다시 가져오기 
되돌리기: { 
// Fx 옵션 허용 
기간: 50 
}, 
// 마우스를 따라가는 대신 드래그된 요소의 불투명도 결정 복사
불투명도: .5, 
onStart: function(el){ 
// 전달되는 것은 드래그하는 요소입니다 
$('start_ind').highlight('#F3F865') ; 
el.highlight('#F3F865'); 
}, 
onSort: function(el) { 
// 전달되는 요소는 드래그하는 요소입니다. 
$('sort_ind ').highlight('#F3F865'); 
}, 
onComplete: function(el) { 
// 전달되는 것은 드래그하는 요소 
$('complete_ind')입니다. 하이라이트('#F3F865'); 
var listOne = sortableLists.serialize(0); 
var listTwo = sortableLists.serialize(1) 
$('numberOrder').set('text', listOne).highlight('#F3F865'); 
$('letterOrder').set('text', listTwo).highlight('#F3F865') ; detach(); // 버튼을 클릭하여 드래그할 수 있도록 컨트롤러를 비활성화합니다. 
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) 
}); 

 
컨트롤러는 기본적으로 활성화되어 있지 않습니다(위 코드를 주의 깊게 살펴보세요). 드래그 정렬을 시작하려면 "정렬 활성화" 버튼을 클릭해야 합니다. 