jQuery UI Sortable Position

Question

How do I track what position an element is when its position in a sortable list changes

User · Answer

As per the official documentation of the jquery sortable UI: http://api.jqueryui.com/sortable/#method-toArray

In update event. use:

var sortedIDs = $( ".selector" ).sortable( "toArray" );

and if you alert or console this var (sortedIDs). You'll get your sequence. Please choose as the "Right Answer" if it is a right one.

User · Answer

You can use the ui object provided to the events  specifically you want the stop event  the ui item property and  index    like this       sortable   sortable       stop  function event  ui            alert  New position      ui item index                 You can see a working demo here  remember the  index   value is zero-based  so you may want to  1 for display purposes

User · Answer

I wasn t quite sure where I would store the start position  so I want to elaborate on David Boikes comment  I found that I could store that variable in the ui item object itself and retrieve it in the stop function as so        sortable    sortable       start  function event  ui            ui item startPos   ui item index               stop  function event  ui            console log  Start position      ui item startPos           console log  New position      ui item index

User · Answer

Use update instead of stop  http   api jqueryui com sortable      update  event  ui        Type  sortupdate      This event is triggered when the user stopped sorting and the DOM   position has changed          stop  event  ui        Type  sortstop      This event is triggered when sorting has stopped  event Type  Event   Piece of code   http   jsfiddle net 7a1836ce    lt script type  text javascript  gt   var sortable      new Object    sortable s1       new Array 1  2  3  4  5   sortable s2       new Array 1  2  3  4  5   sortable s3       new Array 1  2  3  4  5   sortable s4       new Array 1  2  3  4  5   sortable s5       new Array 1  2  3  4  5    sortingExample     function sortingExample            Init vars      var tDiv          lt div gt  lt  div gt         var tSel                  ul     for  var tName in sortable                    Creating ul list         tDiv append createUl sortable tName   tName               Add selector id         tSel          tName                       body   append   lt div id  divArrayInfo  gt  lt  div gt            body   append tDiv           ul sortable params        tSel  sortable  connectWith tSel         start  function event  ui                        ui item startPos   ui item index                      update  function event  ui                        var a     ui item startPos              var b     ui item index                var id   this id                  If element moved to another Ul then  update  will be called twice                1st from sender list                2nd from receiver list                Skip call from sender  Just check is element removed or not              if         id     li   length  lt  sortable id  length                                return                             if ui sender     null                                sortArray a  b  this id  this id                             else                               sortArray a  b    ui sender  attr  id    this id                              printArrayInfo                      disableSelection         Add styles          lt style gt         attr  type    text css        html   body  background black  color white  padding 50px    sortableClass   clear both  display  block  overflow  hidden  list-style-type  none     sortableClass li   border  1px solid grey  float left  clear none  padding 20px           appendTo  head          printArrayInfo        function printArrayInfo          var tStr            for   tName in sortable                 tStr    tName                  for var i 0  i  lt  sortable tName  length  i                              console log sortable tName  i                tStr    sortable tName  i                              tStr      lt br gt                    divArrayInfo   html tStr        function createUl tArray  tId         var tUl       lt ul gt     id tId  class  sortableClass         for var i 0  i  lt  tArray length  i                      Create Li element         var tLi       lt li gt     tArray i      lt  li gt             tUl append tLi               return tUl     function sortArray a  b  idA  idB        var c       c   sortable idA  splice a  1       sortable idB  splice b  0  c             lt  script gt

[jquery] jQuery UI Sortable Position

Examples related to jquery

Examples related to jquery-ui

Examples related to jquery-ui-sortable