jQuery UI可排序位置

Question

如何跟踪元素在可排序列表中的位置更改时的位置？

Answer 1

您可以使用提供给事件ui对象，特别是你想要的stop event的ui.item property和.index()，像这样：

$("#sortable").sortable({ 
    stop: function(event, ui) { 
     alert("New position: " + ui.item.index()); 
    } 
}); 

You can see a working demo here，记得.index()值是从零开始的，所以你可能想要为显示目的+1。

Answer 2

我不太清楚我会在哪里存储起始位置，所以我想详细说明David Boikes的评论。我发现我可以变量存储在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()); 
    } 
}); 

Answer 3

使用更新代替停止

http://api.jqueryui.com/sortable/

更新（事件，UI）

类型：sortupdate

当用户停止排序并且DOM 位置发生更改时，将触发此事件。

。

停止（事件，UI）

类型：sortstop

此事件排序时已经停止被触发。事件类型：事件

一段代码：

http://jsfiddle.net/7a1836ce/

<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>