CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-pluginsjquery-ui-sortable
Laxman Rana
Laxman Rana

Reputation: 2924

Custom index in jQuery sortable

I created sortable list of items using jQuery sortable library.

HTML :

<ul id="sortable">
    <li id="item1" data-index="1">Item 1</li>
    <li id="item2" data-index="2">Item 2</li>
    <li id="item3" data-index="3">Item 3</li>
    <li id="item4" data-index="4">Item 4</li>
    <li id="item5" data-index="5">Item 5</li>
</ul>

JS :

(function($) {
    $('#sortable').sortable({
        stop: function(e, ui) {
            console.log(ui.item.index()); // Returns 0,1,2 etc
        }
    });
})(jQuery);

How can I use data-index attribute of li tag as a custom index?

It should print custom index value instead of its own index value i.e 0,1,2 etc.

Upvotes: 1

Views: 739

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Working fiddle

You could use $(ui.item).data('index') check example below :

(function($) {
  $('#sortable').sortable({
    stop: function(e, ui) {
      console.log($(ui.item).data('index')); // Returns 0,1,2 etc
    }
  });
})(jQuery);

Hope this helps.

(function($) {
  $('#sortable').sortable({
    stop: function(e, ui) {
      alert($(ui.item).data('index')); // Returns 0,1,2 etc
    }
  });
})(jQuery);
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor:move; }
#sortable li span { position: absolute; margin-left: -1.3em; }
#sortable li.fixed{cursor:default; color:#959595; opacity:0.5;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" rel="stylesheet"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>

<ul id="sortable">
    <li id="item1" data-index="111">Item 1</li>
    <li id="item2" data-index="222">Item 2</li>
    <li id="item3" data-index="333">Item 3</li>
    <li id="item4" data-index="444">Item 4</li>
    <li id="item5" data-index="555">Item 5</li>
</ul>

Upvotes: 1

Related Questions