Sortable. No jQuery.
Description: Sortable - is a minimalist JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery. Supports Meteor, AngularJS, React and any CSS library, e.g. Bootstrap.
Keywords: sortable, reorder, list, javascript, html5, drag and drop, dnd, animation, groups, angular, ng-sortable, react, mixin, effects, rubaxa

# The JavaScript library for modern browsers and touch devices. No jQuery.

List A

- бегемот
- корм
- антон
- сало
- железосталь
- валик
- кровать
- краб

List B

- казнить
- ,
- нельзя
- помиловать

Multi
Group A
Group B
Group C
Editable list

- Оля✖
- Владимир✖
- Алина✖

Advanced groups
pull & put

- Meat
- Potato
- Tea

only pull (clone) no reordering

- Sex
- Drugs
- Rock'n'roll

only put

- Money
- Force
- Agility

Drag handle and selectable text

- ☰Select text freely
- ☰Drag my handle
- ☰Best of both worlds

AngularJS / ng-sortable
{{remaining()}} of {{todos.length}} remaining [ archive ]

- {{todo.text}}

{{remaining()}} of {{todos.length}} remaining

- {{todo.text}}

Code example

    // Simple list
    var list = document.getElementById("my-ui-list");
    Sortable.create(list); // That's all.

    // Grouping
    var foo = document.getElementById("foo");
    Sortable.create(foo, { group: "omega" });

    var bar = document.getElementById("bar");
    Sortable.create(bar, { group: "omega" });

    // Or
    var container = document.getElementById("multi");
    var sort = Sortable.create(container, {
      animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
      handle: ".tile__title", // Restricts sort start click/touch to the specified element
      draggable: ".tile", // Specifies which items inside the element should be sortable
      onUpdate: function (evt/**Event*/){
         var item = evt.item; // the current dragged HTMLElement
      }
    });

    // ..
    sort.destroy();

    // Editable list
    var editableList = Sortable.create(editable, {
      filter: '.js-remove',
      onFilter: function (evt) {
        var el = editableList.closest(evt.item); // get dragged item
        el && el.parentNode.removeChild(el);
      }
    });

See also
Loading…