Jquery UI：如何在 drop 事件上更新 id

Question

我正在为我的练习制作简单的拖放。我正在拖动元素并将其放入放置区，有两个 div 拖动我并复制我，它们都在工作，但在重复功能中，我正在增加 ID，即 test-clone-1 它工作正常。我只想知道如何在 drop 时增加 id，因为在 drop 时默认 id 是 test-clone-1 因为它在复制时增加（ test-clone-2、test-clone-3）。我希望如果我拖放元素，默认 id 是 test-clone-1 并且当我再次拖放时，id 应该是 test-clone-2 但是拖放和重复的 id 增量应该相互关联

$( "#editorDesignView" ).droppable({
        accept: '.textTemplate',
      drop: function( event, ui ) {
        var html = '<div id="test-clone-1" class="test" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;">Add your text here.</p><div style="padding:10px; width:50%;" class="draggable-area">drag me</div><div style="padding:10px;width:50%;" class="js-duplicate">duplicate me</div></div>';
  $(html).appendTo(this).hide().slideDown();

      }
    });
  $('#editorDesignView').sortable({
  handle: '.draggable-area'
  });

Fiddle link

Answer 1

你的意思是这样的？当您拖放 c 时，c 会增加，而当重复时 c 保持不变？

  var c = 1;
  $(".textTemplate").draggable({
    helper: "clone",
    zIndex: 2500,
  });
  $( "#editorDesignView" ).droppable({
        accept: '.textTemplate',
      drop: function( event, ui ) {
        var html = '<div id="test-clone-'+c+'" class="test" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;">Add your text here. ' + c + '</p><div style="padding:10px; width:50%;" class="draggable-area">drag me</div><div style="padding:10px;width:50%;" class="js-duplicate">duplicate me</div></div>';
  $(html).appendTo(this).hide().slideDown();
        c++;
      }
    });
  $('#editorDesignView').sortable({
  handle: '.draggable-area'
  });

Answer 2

真正的方法是计算在editorDesignView 中以test-clone- 开头的id 的div 元素。

var cloneCount = $("#editorDesignView").find("div[id^='test-clone-']").length+1;

cloneCount 现在保存要分配给已删除元素的数字。

对于拖动的克隆（重新排序）也是如此。
这将确保正确的数字。

实际上，如果您对克隆进行重新排序，最后一个元素是引用，并且可能没有最高编号。

这是你的updated Fiddle。