jQuery UI可sorting位置
如何追踪元素在可sorting列表中的位置变化时的位置？
您可以使用提供给事件的ui对象，特别是要stop事件 ， ui.item属性和.index() ，如下所示：
$("#sortable").sortable({ stop: function(event, ui) { alert("New position: " + ui.item.index()); } });
你可以在这里看到一个工作演示 ，记住.index()值是从零开始的，所以你可能想为显示目的+1。
我不太确定我会在哪里存储起始位置，所以我想详细阐述David Boikes的评论。 我发现我可以将该variables存储在ui.item对象本身中，并在停止函数中检索它，如下所示：
$( "#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()); } });
使用更新而不是停止
http://api.jqueryui.com/sortable/
更新 （事件，用户界面）
types：sortupdate
当用户停止sorting并且DOM位置已经改变时，该事件被触发。
。
停止 （事件，用户界面）
types：sortstop
sorting停止后，将触发此事件。 事件types：事件
一段代码：
<script type="text/javascript"> 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 = $('<div></div>'); var tSel = ''; // ul for (var tName in sortable) { // Creating ul list tDiv.append(createUl(sortable[tName], tName)); // Add selector id tSel += '#' + tName + ','; } $('body').append('<div id="divArrayInfo"></div>'); $('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 < 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 $('<style>') .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 < sortable[tName].length; i++) { // console.log(sortable[tName][i]); tStr += sortable[tName][i] + ', '; } tStr += '<br>'; } $('#divArrayInfo').html(tStr); } function createUl(tArray, tId) { var tUl = $('<ul>', {id:tId, class:'sortableClass'}) for(var i=0; i < tArray.length; i++) { // Create Li element var tLi = $('<li>' + tArray[i] + '</li>'); 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); } </script>
