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);
        },
    })

无法通过ui.item访问item id，但是可以在ui.sender.attr（'id'）访问它，所以如果你使用element的id而不是数据，你可以这样做：

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

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

虽然重复ID似乎不太好。

jQuery UI connectToSortable如何访问被丢弃的元素attr

2 个答案: