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

Question

我正在处理Draggable example您可以在其中将一个元素的副本拖到其他元素的可排序列表中。我想要做的是为拖入列表中的每个新元素分配一个 ID，以便可以将它们相互区分。问题似乎是，当您开始移动这些元素时，看起来您正在拖动该元素，但实际上您正在拖动一个看起来像它的生成的助手。最初，我在可排序停止处设置新放置元素的 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 绑定(bind)的任何功能现在都将中断，因为选择器将不正确。我可以设置一个临时变量来在可排序中拖动时保存 ID，或者我可以在我的项目中永久保留新 ID，但我希望可排序已经内置了一些东西。可排序是否有办法处理这种克隆问题？

我的代码可以在 this plunker 中找到.

Answer 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，没有它，事情将无法工作!