jQuery UI Method - Part 1

jQuery has many methods for interaction. Using these methods we can drag, drop, resize, select and sort the HTML elements. In a previous article we learned about dragging using the draggable() method. Now let's learn about more methods, like sortable(), selectable(), droppable() and resizable().

The Sortable method reorders the elements in a list or grid using the mouse. It performs sortability based upon an operation string passed as the first parameter. It can also be used in two ways.

Syntax:

$(selector, context).sortable (options)

$(selector, context).sortable ("action", [params])

Here we can use both methods for sorting the HTML elements. Let's do some example using the first method:

$(selector, context).sortable (options)

Here in this syntax the option may be appendTo, axis, cancel cursor, cursorAt, distance, disable, grid, handle, helper, scroll, revert, zIndex and so on. These options are used for different actions in the sortable() method.



In the given example we can sort the <li> elements using the cursor.



Now you can change the elements, like (Shiftinh HTML below PHP).



Similarly you can sort/scuffle all the elements. Now let’s use the delay and distance options here. distance:10 & delay:800





The output of this code will be:



Now as per options we can sort the elements after “distance:10 and delay:800”.

Try to sort:



So this was about the jQueryUI sortable() method.

Do more practice and you will get more knowledge. Other methods will be discussed in the next article.