jquery - Get ID of which ID sortable replaced -


here current code, works. issue need find out id replaced, not index. instance, if move item 3 item 5, need start variable 127 , end variable 129 example. how alter code information?

$(function() { $( "#sortable" ).sortable({ start: function(event, ui) {     ui.item.startpos = ui.item.index(); }, stop: function(event, ui) {     alert("start position: " + ui.item.startpos);     alert("new position: " + ui.item.index());     alert("item moved: " + $(ui.item).attr('id'));     var start = ui.item.startpos;     var end = ui.item.index();     var id = $(ui.item).attr('id');     $.ajax({              data: (start, end, id),              type: 'post',              url: 'update_order.php?start='+start+'&end='+end+'&id='+id+''              }); } }); $( "#sortable" ).disableselection(); 

});

<ul id="sortable">      <li class="ui" id="125"><span></span>item 1</li>      <li class="ui" id="126"><span></span>item 2</li>      <li class="ui" id="127"><span></span>item 3</li>      <li class="ui" id="128"><span></span>item 4</li>      <li class="ui" id="129"><span></span>item 5</li>      <li class="ui" id="130"><span></span>item 6</li>      <li class="ui" id="131"><span></span>item 7</li>  </ul>  

all infos needed available in stop event.

  • ui.item item you've moved around.
  • ui.item.prev() / ui.item.next() item has been "replaced"

$(function () {      $("#sortable").sortable({          stop: function (event, ui) {              var moved = ui.item,                  replaced = ui.item.prev();                            // if replaced.length === 0 item has been pushed top of list              // in case need .next() sibling              if (replaced.length === 0) {                  replaced = ui.item.next();              }                            console.log(moved.attr("id"), replaced.attr("id"));          }      });  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>    <ul id="sortable">      <li class="ui" id="125"><span></span>item 1</li>      <li class="ui" id="126"><span></span>item 2</li>      <li class="ui" id="127"><span></span>item 3</li>      <li class="ui" id="128"><span></span>item 4</li>      <li class="ui" id="129"><span></span>item 5</li>      <li class="ui" id="130"><span></span>item 6</li>      <li class="ui" id="131"><span></span>item 7</li>  </ul>


Comments

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

unity3d - Unity local avoidance in user created world -