Question

我正在使用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绑定的任何功能现在都会中断，因为选择器将是不正确的。我可以设置一个临时变量来保存ID，同时我可以在sortable中拖动，或者我可以通过我的项目使新ID保持不变，但我希望Sortable已经内置了一些东西.Disableable是否有办法处理这个克隆问题

我的代码可在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，没有它，这些东西将无效！

draggable / sortable helper的临时存在会破坏存储的ID

1 个答案: