Comparison of Drag and Drop JS Libraries

Recently we needed to evaluate a UX friendly drag and drop js library.

Requirements

Ordering of elements by drag and drop.
Moving of elements between different groups.
Serialization of the elements group and order in the group to be synced with server.
Emission of events on drag start, move and drop.
Mobile support (touch events)

Candidates

Ordering of elements by drag and drop

All the libraries support this feature by definition.
For jq-sortable there is no animations of the movable elements but you can add them yourself.
Nestable experience is basic but clean and smooth.
Gridly (see example here) has some beautiful animations but the drag and drop experience feels a bit clingy.
Sortable drag and drop out of the box experience feels the best.

Winner here is Sortable

Moving of elements between groups

Gridly fails here due to lack of support for groups out of the box.
Nestable and jq-sortable has a good support for this, in addition both libraries support nesting of elements, where nesting is better in Nestable where the nested lists are dynamically generated.

Winner here is Nestable.

Serialization

Unfortunately there is no out of the box support for serialization in both Gridly and Sortable.

Nestable provides strict serialization output.

[{"id":1},{"id":2},{"id":3,"children":[{"id":4},{"id":5}]}]

jq-sortable allows customizable serialization function.

serialize: function (parent, children, isContainer) {
  /* custom serialization code */
}

Winner in this section is jq-sortable

Events

Sortable has events for add, remove and update of elements

onAdd: function (evt){
  var itemEl = evt.item; // the current dragged HTMLElement
},

onUpdate: function (evt){
  /* custom code */
},

onRemove: function (evt){
  /* custom code */
}

Nestable fires change event after the drop.

$('.draggable').on('change', function() {
    /* on change event */
});

Gridly and jq-sortable fires a variety of events for drag start, move and end.

Mobile support

jq-sortable fails here since it does not support touch events.
All the rest support touch events.

Winner here is Sortable because it does not require jquery.

Summary

Library	gridly	rbx sortable	jquery-sortable	nestable
drag drop	+	+	+	+
animations	+	-	-	-
groups	-	+	+	+
serialization	-	-	+	+
events	+	+	+	+
mobile	+	+	-	+
no jquery	-	+	-	-

Best matching our requirements is Nestable.
It provides good support for server backed (via serialization) element dragging between groups and it supports mobile events. It is fairly customizable and has a smooth user experience.

If you aim for desktop browsers, jq-sortable is a recommended since it provides high level of customization.

For drag and drop with no server backing, Sortable wins for great user experience.

If you don't need groups, Gridly is beautiful.

torkale/drag_drop.md