可拖动/可排序助手的临时存在会破坏存储的 ID答案

【问题标题】：Temporary existence of draggable/sortable helper disrupt stored IDs可拖动/可排序助手的临时存在会破坏存储的 ID
【发布时间】：2014-07-25 11:58:19
【问题描述】：

我正在处理Draggable example，您可以在其中将一个元素的副本拖到其他元素的可排序列表中。我想要做的是为拖到列表中的每个新元素分配一个 ID，以便它们可以相互区分。问题似乎是当你开始移动这些元素时，看起来你正在拖动那个元素，但实际上你正在拖动一个看起来像它的生成的助手。最初我在 Sortable stop 上设置新放置元素的 ID

model = [];
$( "#sortable" ).sortable({
      revert: true,
      stop: function(event, ui){
          ui.item[0].id = id++;
          model.push(id);
        }
        console.log(model);        
      }
    });

在这种情况下，存储在 ui.item[0] 中的 html 元素是将保留在列表中的元素，而不是它的辅助克隆。问题是，正如我之前所说，当您再次尝试移动它时，该元素似乎已被破坏，并且将创建一个新元素。新元素将被赋予一个新 ID，并且我在其他地方绑定到该原始 ID 的任何功能现在都将中断，因为选择器将不正确。当我在 sortable 中拖动时，我可以设置一个临时变量来保存 ID，或者我可以通过我的项目使新 ID 永久存在，但我希望 Sortable 已经内置了一些东西。Sortable 是否有办法处理这种克隆问题？

我的代码在this plunker 中可用。

【问题讨论】：

请为您的代码创建一个小提琴，并尝试清楚地解释您的问题到底是什么！
@RahulGupta 我已经用我的代码添加了 plunker，正如我在问题中所说，当我将新项目添加到可排序列表时，我给了它们唯一的 ID。当我再次移动该元素时，将创建一个不保留该 ID 的副本。我需要该 ID 与元素保持联系。

标签： jquery jquery-ui jquery-ui-draggable jquery-ui-sortable

【解决方案1】：

DEMO JS代码：

var id=1;
$("#sortable").sortable({
    revert: true,
    stop: function(event, ui) {
        if (ui.item.hasClass("new-item")) {
            // This is a new item
            ui.item.removeClass("new-item");
            ui.item.html("New element id = "+id);
            ui.item.attr('id', id);
            id++;
        }
    }
});
$(".new-item").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
});
$("ul, li").disableSelection();

HTML：

<ul>
    <li class="new-item ui-state-highlight">Drag me down</li>
</ul>

<ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

注意：为可拖动元素添加了一个新类new-item，没有它就无法工作！

【讨论】：