jQuery UI connectToSortable 如何访问删除的元素属性

Question

我正在使用连接到可排序列表的 jQuery UI 可拖动列表，它通常运行良好，只是当将项目拖放到可排序列表时，它似乎没有正确克隆原始元素 id 或任何关联的 jquery 数据（ )。

奇怪的是，这些东西都可以从接收器函数内部获得，但它似乎并没有真正将它们保存到元素中，所以诸如可排序列表的更新函数之类的东西永远不会正确看到新删除的元素，因为新的 li 元素没有真的有身份证。

我做错了什么？！

Javascript：

$(document).ready(function () {
    $("#dest").sortable( {
      update : function () { 
          onUpdate();
        },
      receive: function(event, ui) {
          alert("dropped item ID: "+ui.item.attr('id'));
        }
    });

    jQuery('#src > li').draggable({helper:'clone',connectToSortable:'#dest'});
});

function onUpdate() {
    var order = $('#dest').sortable('toArray');
    var txt = "Order: "+order;

    $("#info").text(txt);


}

HTML：

Source List (dragable):
<div>
    <ul id="src">
        <li id="src_0">src 0</li>
        <li id="src_1">src 1</li>
        <li id="src_2">src 2</li>
    </ul>
</div>

Target List (sortable):  
<div>
    <ul id="dest">
        <li id="dest_0">dest 0</li>
        <li id="dest_1">dest 1</li>
        <li id="dest_2">dest 2</li>
    </ul>
</div>

<span id="info">
    Waiting update...
</span>

http://jsfiddle.net/h3WJH/1/的演示

Answer 1

我相信 jQuery 是故意这样做的，因为 ID 旨在识别页面上的单个元素。尝试使用$.data() 来存储信息。

看看这个：http://jsfiddle.net/wngchng87/h3WJH/11/

Answer 2

我遇到了同样的问题，但没有找到解决问题的好方法，但找到了解决方法。

原始元素可以在“接收”事件时访问，但不能在更新时访问。我做了以下事情：

    var droppedId;
    myList.sortable({ 
        receive: function(e, ui) {
            droppedId = ui.item.data('id');

        },
        update: function(e, ui) {
            ui.item.data('id', droppedId);
        },
    })

item id 不能通过 ui.item 访问，但它可以在 ui.sender.attr('id') 获得，所以如果你使用元素的 id 而不是数据，你可以这样做：

    var droppedId;
    myList.sortable({ 
        receive: function(e, ui) {
            droppedId = ui.sender.attr('id');

        },
        update: function(e, ui) {
            ui.item.attr('id', droppedId);
        },
    })

虽然重复 ID 似乎不是一个好主意。