jQuery UI Sortable Position

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

Я не был уверен, где я буду хранить стартовую позицию, поэтому я хочу подробно остановиться на комментарии Дэвида Бойкса. Я обнаружил, что я мог бы хранить эту переменную в самом 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 .

.

остановка (событие, щ)

Тип: 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>