Search code examples
javascriptjqueryhtmldrag-and-droprubaxa-sortable

Sortable list + Finding dropped index


OK, I'm experimenting a bit with RubaXa's Sortable plugin. (Here's a great example page)

    var sort = new Sortable($('#items')[0], {
        animation: 150,

        onUpdate: function(evt/**Event*/){
            var item = evt.item;
            console.log(evt);
        }
    });

The Plugin works fine. The thing is how can I get the index at which the element has been dropped? (e.g. from index 2 of the list to index 0)

Demo: http://jsfiddle.net/j7fesLkp/1/


Solution

  • The event that's passed to onSort has the fields you need: oldIndex and newIndex:

    var sort = new Sortable(items, {
        onSort: function (evt) {
            console.log(evt.oldIndex + ' -> ' + evt.newIndex);
        }
    });
    <!-- Sortable -->
    <script src="https://rawgit.com/RubaXa/Sortable/dev/Sortable.js"></script>
    
    <ul id="items">
        <li data-id="1">item 1</li>
        <li data-id="2">item 2</li>
        <li data-id="3">item 3</li>
        <li data-id="4">item 4</li>
        <li data-id="5">item 5</li>
    </ul>