Question

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

这是小提琴：demo

这是我的代码：

dashboard.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 code：

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

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

1 个答案: