javascript - Jquery 用户界面 : How can I update id on drop event

Question

我正在为我的练习进行简单的拖放。我正在拖动元素并将其放入放置区域，有两个 div 拖动我并复制我，它们都在工作，但在重复函数中，我增加了 id，即 test-clone-1 它工作正常。我只是想知道如何在删除时增加 id，因为在删除时默认 id 是 test-clone-1 因为它在复制时会增加( test-clone-2、测试克隆-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 会保持不变？

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