Jquery sortable change event element position

Question

Is there way to get current position of helper being dragged on over new position        sortable   sortable           start  function  event  ui                var currPos1   ui item index                       change   function  event  ui                var currPos2   ui item index                    It seems that currPos1 and currPos2 have same value when actual change happens    What I need to achieve is highlight to user all positions between  start drag element  to  currently replaced element   Once user releases mouse button update happens and only then I get new position  but I need it before mouse release

User · Answer

sortable    sortable       change  function event  ui                   var pos   ui helper index    lt  ui placeholder index                    start  ui helper index    end  ui placeholder index                     start  ui placeholder index    end  ui helper index                this               children   removeClass   highlight                 not  ui helper   slice  pos start  pos end   addClass   highlight                stop  function event  ui              this  children   removeClass   highlight                 FIDDLE  An example of how it could be done inside change event without storing arbitrary data into element storage  Since the element where drag starts is ui helper  and the element of current position is ui placeholder  we can take the elements between those two indexes and highlight them  Also  we can use this inside handler since it refers to the element that the widget is attached  The example works with dragging in both directions

User · Answer

This works for me   start  function event  ui            var start pos   ui item index            ui item data  start pos   start pos          update  function  event  ui            var start pos   ui item data  start pos            var end pos   ui item index                  sortable li   removeClass  highlights

User · Answer

If anyone is interested in a sortable list with a changing index per listitem  1st  2nd  3th etc      http   jsfiddle net aph0c1rL 1       sortable   sortable      handle            handle    placeholder      sort-placeholder    forcePlaceholderSize  true   start  function  e  ui         ui item data   start-pos   ui item index   1        change  function  e  ui             var seq         startPos   ui item data   start-pos             index         correction                   if startPos  lt  placeholder pos  we go from top to bottom          else startPos  gt  placeholder pos  we go from bottom to top and we need to correct the index with  1                correction   startPos  lt   ui placeholder index     0   1         ui item parent   find   li prize   each  function  idx  el                   var  this      el              index    this index                         correction 0 means moving top to bottom  correction 1 means bottom to top                    if      index 1  gt   startPos  amp  amp  correction     0       index 1  lt   startPos  amp  amp  correction     1                          index    index   correction             this find    ordinal-position   text   index   ordinalSuffix   index                                     handle dragged item separatelly       seq   ui item parent   find   li sort-placeholder   index     correction        ui item find    ordinal-position    text  seq   ordinalSuffix  seq               this function adds the correct ordinal suffix to the provide number function ordinalSuffix  number       var suffix          if   number   10   10     1           suffix    th         else if   number  gt  0            switch  number   10               case 1          suffix    st           break        case 2          suffix    nd           break        case 3          suffix    rd           break        default          suffix    th           break              return suffix      Your markup can look like this    lt ul class  sortable   gt   lt li  gt               lt div gt           lt span class  ordinal-position  gt 1st lt  span gt           A header      lt  div gt       lt div gt           lt span class  icon-button handle  gt  lt i class  fa fa-arrows  gt  lt  i gt  lt  span gt       lt  div gt       lt div class  bpdy   gt          Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod      lt  div gt   lt  li gt    lt li  gt               lt div gt           lt span class  ordinal-position  gt 2nd lt  span gt           A header      lt  div gt       lt div gt           lt span class  icon-button handle  gt  lt i class  fa fa-arrows  gt  lt  i gt  lt  span gt       lt  div gt       lt div class  bpdy   gt          Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod      lt  div gt   lt  li gt  etc      lt  ul gt

User · Answer

UPDATED  26 08 2016 to use the latest jquery and jquery ui version plus bootstrap to style it    demo  http   so lucafilosofi com jquery-sortable-change-event-element-position      function             sortable   sortable           start  function event  ui                var start pos   ui item index                ui item data  start pos   start pos                      change  function event  ui                var start pos   ui item data  start pos                var index   ui placeholder index                if  start pos  lt  index                        sortable li nth-child     index        addClass  highlights                  else                       sortable li eq      index   1         addClass  highlights                                     update  function event  ui                    sortable li   removeClass  highlights

User · Answer

Use update  stop and receive events  check it over here  Jquery Sortable Update Event can called only one time

[jquery] Jquery sortable 'change' event element position

Examples related to jquery

Examples related to jquery-ui-sortable