jQuery UI：如何在放置事件中更新ID

Question

我只是為了練習而作簡單的拖放。 我將元素拖放到放置區域中，有兩個div拖動我並復制我它們都在工作，但是在復制功能中我增加了test-clone-1的ID，它工作正常。 我只想知道如何在放置時增加id，因為在放置時默認ID是test-clone-1，因為它在復制時會遞增（ test-clone-2 ， test-clone-3 ）。 我希望如果我拖動n元素，則默認ID為test-clone-1，而當我再次拖動n元素時，現在的ID應為test-clone-2，但拖動n元素和重復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'
  });

小提琴鏈接

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

Answer 2

做到這一點的真正方法是在test-clone-中editorDesignView具有id以test-clone- editorDesignView的div元素。

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

現在， cloneCount保留要提供給放置元素的數字。

對於拖動的克隆（重新排序），這是相同的。
這樣可以確保號碼正確。

實際上，如果您對克隆進行了重新排序，則最后一個元素是參考，並且可能沒有最高編號。

這是您更新的Fiddle 。