CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortablejquery-ui-draggablejquery-ui-droppable
Ravi Gadag
Ravi Gadag

Reputation: 15861

Sortable VS DragnDrop in Jquery

As I am trying to work on sorting some data using Jquery, I thought I would use drag and drop. Later, I visited the jQueryui site. They have 'drag and drop' as well as sortable functionality.

Now I implemented 'drag and drop' functionality to sort the HTML Table Row with saving their position in DB.

Now I am getting confused, though:

  1. Does Sortable also perform the same function?
  2. Does Sortable work only with UL or OL or LI ? Can it also work with Table Row?
  3. What is the Difference when i drag and drop the rows? (exchanging the position), compared to Sortable (Sorting the rows). Are these different cases? I am really confusing these concepts.
  4. Is it the right way to do sorting with an HTML Table Row ( by Draggable and Droppable as i did it now ) ?
  5. Are there any guidelines when to use Sortable versus Draggable/droppable

Upvotes: 2

Views: 1900

Answers (1)

Mordhak
Mordhak

Reputation: 2656

Sortable works with tables too, see this jsFiddle

Concerning differences between Sortable and Drag&Drop, they are just answering to two differents needs :

  • sortable is kind of drag&drop but implements all required graphical behaviour for a predefined group of items. When you move an item, all other items are moved accordingly.
  • in the other hand, drag&drop allows you to simply take an item and move it all around (draggable), but you will have to choose in which item you can drop it (droppable).

With sortable, you are searching for a logical behaviour with sorted items. With drap&drop your are searching for interaction between items.

For example, organizing your desktop icons is like sortable (moving an icon will move others all around to reorganize them). If you take a folder to put it into another one, it's like draggable/droppable (taking a folder and droppping it over another one will not reorganize it but trigger an action which will be to move the folder inside the other).

Take a look at jQuery UI documentation for Sortable and Draggable/Droppable.

Hope this will help you.

Upvotes: 6

Related Questions