Vị trí có thể sắp xếp giao diện người dùng jQuery

Question

Làm cách nào để theo dõi vị trí của phần tử khi vị trí của nó trong danh sách có thể sắp xếp thay đổi?

Answer 1

Bạn có thể sử dụng đối tượng ui cung cấp cho các sự kiện, đặc biệt là bạn muốn stop event, các ui.item property và .index(), như thế này:

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

You can see a working demo here, nhớ những giá trị .index() là zero-based, vì vậy bạn có thể muốn +1 cho mục đích hiển thị.

Answer 2

Tôi đã không hoàn toàn chắc chắn nơi tôi sẽ lưu trữ vị trí bắt đầu, vì vậy tôi muốn xây dựng trên bình luận David Boikes. Tôi thấy rằng tôi có thể lưu trữ biến trong đối tượng ui.item chính nó và lấy nó trong chức năng dừng như vậy:

$("#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

Sử dụng cập nhật thay vì dừng

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

cập nhật (sự kiện, ui)

Loại: sortupdate

Sự kiện này được kích hoạt khi người dùng dừng sắp xếp và vị trí DOM đã thay đổi.

.

dừng (sự kiện, ui)

Loại: sortstop

Sự kiện này được kích hoạt khi sắp xếp đã dừng lại. Loại sự kiện: Sự kiện

Piece of mã:

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>