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
Post a Comment