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 on 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 examples 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.