获取可替换的 ID 的 ID答案

【问题标题】：Get ID of which ID sortable replaced获取可替换的 ID 的 ID
【发布时间】：2015-07-22 15:12:46
【问题描述】：

这是我当前的代码，一切正常。问题是我需要找出替换了哪个 ID，而不是索引。例如，如果您将第 3 项移至第 5 项，我需要将 Start 变量设为 127，将 End 变量设为 129。如何更改我的代码以获取此信息？

$(function() {
$( "#sortable" ).sortable({
start: function(event, ui) {
    ui.item.startPos = ui.item.index();
},
stop: function(event, ui) {
    alert("Start position: " + ui.item.startPos);
    alert("New position: " + ui.item.index());
    alert("Item Moved: " + $(ui.item).attr('id'));
    var start = ui.item.startPos;
    var end = ui.item.index();
    var id = $(ui.item).attr('id');
    $.ajax({
             data: (start, end, id),
             type: 'POST',
             url: 'update_order.php?start='+start+'&end='+end+'&id='+id+''
             });
}
});
$( "#sortable" ).disableSelection();

});

<ul id="sortable"> 
    <li class="ui" id="125"><span></span>Item 1</li> 
    <li class="ui" id="126"><span></span>Item 2</li> 
    <li class="ui" id="127"><span></span>Item 3</li> 
    <li class="ui" id="128"><span></span>Item 4</li> 
    <li class="ui" id="129"><span></span>Item 5</li> 
    <li class="ui" id="130"><span></span>Item 6</li> 
    <li class="ui" id="131"><span></span>Item 7</li> 
</ul>

【问题讨论】：

您是否尝试在 start 函数中创建全局变量 AS startPos，并在停止移动项目时再次调用该变量？您需要删除“var”才能创建全局变量。您还可以在开始函数中保存对象本身的“开始”位置：'this.startPos=ui.start.index()'。

标签： jquery jquery-ui-sortable

【解决方案1】：

stop 事件中提供了所有需要的信息。

ui.item 是您移动的项目。
ui.item.prev() / ui.item.next() 是被“替换”的项目

$(function () {
    $("#sortable").sortable({
        stop: function (event, ui) {
            var moved = ui.item,
                replaced = ui.item.prev();
            
            // if replaced.length === 0 then the item has been pushed to the top of the list
            // in this case we need the .next() sibling
            if (replaced.length === 0) {
                replaced = ui.item.next();
            }
            
            console.log(moved.attr("id"), replaced.attr("id"));
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<ul id="sortable">
    <li class="ui" id="125"><span></span>Item 1</li>
    <li class="ui" id="126"><span></span>Item 2</li>
    <li class="ui" id="127"><span></span>Item 3</li>
    <li class="ui" id="128"><span></span>Item 4</li>
    <li class="ui" id="129"><span></span>Item 5</li>
    <li class="ui" id="130"><span></span>Item 6</li>
    <li class="ui" id="131"><span></span>Item 7</li>
</ul>

【讨论】：