Starting from today, we will begin to explain more plug-ins in the "more" library. Sortables is a very powerful plug-in that can truly expand the selection surface of your user interface design. The Sortables class also provides an excellent method named "serialize". You can use this method to output the IDs of these elements as arrays. This method is very useful for server-side development. Next, let's take a look at how to create a new sorting item set. We also need to take a look at the last demo instance.
Basic knowledge
Create a new Sortable object
First, assign the elements to be sorted to the variables. For Sortables, if you want to drag and drop elements between multiple lists, you need to put all these elements in an array, like this:
Reference code:
The Code is as follows:
Var sortableListsArray =$ ('# listA, # listb ');
In this way, you can put two ul IDs in an array. Now we can create a new sortable object from this array:
Reference code:
The Code is as follows:
Var sortableLists = new Sortables (sortableListsArray );
We assume the following HTML is used:
Reference code:
The Code is as follows:
- Item A1
- Item A2
- Item A3
- Item A4
- Item B1
- Item B2
- Item B3
- Item B4
Our sortable list looks 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 Value: -- false
This option determines whether your sortable list elements 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 "restrict" (constrain) the list elements can only be moved within the ul of their parent node.
Reference code:
The Code is as follows:
Var sortableLists = new Sortables (sortableListsArray ,{
Constrain: false // The default value is false.
});
Clone
Default Value: -- false
The clone option allows you to add a "clone" element to move your mouse while leaving the original element unchanged. The following example shows how to use the clone option:
Reference code:
The Code is as follows:
Var sortableLists = new Sortables (sortableListsArray ,{
Clone: true // The default value is false.
});
Handle
Default Value: -- false
The handler 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.
Reference code:
The Code is as follows:
Var handleElements =ents $ ('. handlesClass ');
Var sortableLists = new Sortables (sortableListsArray ,{
Handle: handleElements // The default value is false.
});
Opacity
Default Value: 1.
The opacity option allows you to adjust the sorting element. If you use a clone copy, opacity will act on this sort element, rather than the copy with your mouse.
Reference code:
The Code is as follows:
Var sortableLists = new Sortables (sortableListsArray ,{
Opacity: 1 // The default value is 1.
});
Revert
Default Value: -- false
The recovery (revert) parameter can accept the option value of "false" or 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 location. For example, you can set "duration: long". When you release the mouse, the cloned object will return to its position within this time period. If you want to see the revert effect, you can look at the following example:
Reference code:
The Code is as follows:
Var sortableLists = new Sortables (sortableListsArray ,{
Revert: false // The default value is false.
});
// You can also set it to the Fx Option
Var sortableLists = new Sortables (sortableListsArray ,{
Revert :{
Duration: 50
}
});
Snap
Default Value: 4
The snap parameter allows you to set the number of pixels that the mouse must drag before the element is dragged.
Reference code:
The Code is as follows:
Var sortableLists = new Sortables (sortableListsArray ,{
Snap: 10 // you need to drag 10px to start dragging the list.
});
Sortable event
Sortable events are very good and easy to use. Each element passes the current drag (if you use the colone element, it is not the clone element, but the original element ).
OnStart -- triggered when the drag starts (after the snap is triggered)
OnSort -- triggered when the project changes the sorting
OnComplete -- triggered when you put an element down
We will take a closer look at these events later (you can see the results in the examples below ).
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 class. However, when we talk about classes, we will establish a general concept for the second time. This plug-in (the same as other plug-ins we mentioned) follows a similar pattern-use "new" to initialize a plug-in and define one or more selector parameters, define your options and add events (similar to creating a new sortable and tween ). This mode is the basis of the class. The most basic of a class is to allow you to save some options and functions so that you can reuse them. Methods are some specific functions in 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 method.
. Detach ();
By using the. detach (); method, you can strip all controllers from the (detach) so that the entire list cannot be dragged. This is useful for disabling drag.
. Attach ();
This method associates the controller with the sorting item. You can use the. detach (); Method to enable the sorting function again.
. AddItems ();
This method allows you to add new projects to your sorting list. This means that you have a sorting list where users can add new projects. Once you add a new project, you need to start the sorting function on that new project.
. RemoveItems ();
This method allows you to delete some elements from the existing sorting list. It is useful when you need to lock some special items in the sorting list so that they will not be involved in sorting.
. AddLists ();
In addition to adding a new item to an existing sorting list, you may want to add a new list to the sorting list .. The addLists (); method allows you to add multiple lists, which makes it easy to add multiple sorting objects.
. RemoveLists ();
You can remove the entire list from the sorting object. This is useful when you need to lock some special lists. You can remove a list. The remaining items can be sorted, but the list to be removed will be locked.
. Serialize ();
This sorting function is excellent, but what if you want to process the data ?. The serialize (); method returns an array containing these project IDs in their order. You can use the index value to select the list of data to be retrieved.
The Influence of methods far exceeds the content we cover here. If you are a newbie, let this be a simple concept introduction, we will further discuss methods and classes in the subsequent tutorials.
Sample Code
The following example uses some options, all events, and all the methods described above. I hope this code is self explanatory, and there are not many comments and more instructions. Remember, all the following things must be in the domready event.
Reference code:
The Code is as follows:
Var sortableListsArray =$ ('# numberlist, # letterlist ');
Var sortableLists = new Sortables (sortableListsArray ,{
// When I move, copy a copy and move it with the mouse
Clone: true,
// Defines the css Class Name of the drag controller (handle, handle)
Handle: '. handle ',
// After dragging, you can use the special effect to bring it back to a certain position.
Revert :{
// Accept the Fx Option
Duration: 50
},
// Determines the opacity of the drag element, rather than the copy following the mouse
Opacity:. 5,
OnStart: function (el ){
// Transmits the elements you are dragging.
$ ('Start _ ind '). highlight (' # F3F865 ');
El. highlight ('# F3F865 ');
},
OnSort: function (el ){
// Transmits the elements you are dragging.
$ ('Sort _ ind '). highlight (' # F3F865 ');
},
OnComplete: function (el ){
// Transmits the elements 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. Therefore, you must click a button to make them drag
Var addListoSort = $ ('addlisttest ');
$ ('Addlistclick'). addEvent ('click', function (){
SortableLists. addLists (addListoSort );
});
$ ('Removelistbutton '). addEvent ('click', function (){
SortableLists. removeLists (addListoSort );
});
$ ('Able _ 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 above Code ). To start dragging and sorting, click "enable sorting.
Learn more
Refer to the section about sortable in the reading documentation.
Download a zip package containing everything you need
Includes the core library and extended library of MooTools 1.2. The above example shows an external JavaScript file, a simple HTML page, and a CSS file.
