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 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:800The 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.
You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.
Become a sharper developer and jumpstart your career.
$0
$
. 00
monthly
For Basic members:
$20
For Premium members:
$45
For Elite members: