jquery ui sortable：如何在更新事件中获取带有id的当前索引和带有id的旧索引并在ajax中传递参数

Question

我有 2 个 html 表。我正在使用 jquery UI 更改表的位置并通过 ajax 传递此 jquery 事件参数，同时获取表位置的索引和项目 ID，以便我可以在数据库中更新表的当前位置。现在我可以用 id 获取当前索引的位置，但我也想用他们的 id 获取旧索引。这样我就可以同时使用旧索引、旧 id、新索引、新 id 位置并轻松存储在数据库中。但不知道该怎么做。

这是小提琴：演示

这是我的代码：

仪表板.js

$("#widget_update").sortable({      
      update : function(event, ui) {
          var widget = $('#widget_update').sortable('serialize');

        $.ajax({
        type: "POST",
        url: "ajax/dashboard.php",
        dataType : 'json',
        cache: false,
        data: {'aktion' : 'show-widget','widget':ui.item.index(),'item':ui.item[0].id},
        success: function(data){
            $('#widget').html(data.html);                           
        },
        error: function(data){
            alert('Error');         
        }
        });
      }
}); 

Answer 1

看看这个DEMO

JS代码：

$("#sortable").sortable({
    /*stop: function(event, ui) {
        alert("New position: " + ui.item.index());
    }*/
    start: function(e, ui) {
        // creates a temporary attribute on the element with the old index
        $(this).attr('data-previndex', ui.item.index());
    },
    update: function(e, ui) {
        // gets the new and old index then removes the temporary attribute
        var newIndex = ui.item.index();
        var oldIndex = $(this).attr('data-previndex');
        var element_id = ui.item.attr('id');
        alert('id of Item moved = '+element_id+' old position = '+oldIndex+' new position = '+newIndex);
        $(this).removeAttr('data-previndex');

        ///code to pass the data using AJAX
        $.ajax({
        type: "POST",
        url: "your_url",
        data: {'item_id':element_id,'item_old_index':oldIndex,'item_new_index':newIndex},
        success: function(data){
            //code on success
        },
        error: function(data){
            alert('Error');         
        }
        });
    }
});
$("#sortable").disableSelection();

HTML代码：

<h4>Notice: The actual index of the elements starts from 0</h4>
<ul id="sortable"> 
    <li class="ui-state-default" id="item_1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> 
    <li class="ui-state-default" id="item_2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> 
    <li class="ui-state-default" id="item_3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> 
    <li class="ui-state-default" id="item_4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> 
    <li class="ui-state-default" id="item_5"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> 
    <li class="ui-state-default" id="item_6"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> 
    <li class="ui-state-default" id="item_7"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> 
</ul>