Question

我正在为我的练习做简单的拖拽。我拖动元素并将其放入放置区域，有两个div拖动我并复制我他们两个都在工作，但在重复功能我正在递增id test-clone-1 它工作正常。我只想知道如何在drop上增加id，因为在删除时默认id为 test-clone-1 ，因为它在复制时递增（ test-clone-2 < / strong>， test-clone-3 ）。我希望如果我拖动该元素，则默认ID为 test-clone-1 ，当我再次拖动n drop时，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'
  });

Answer 2

实现这一目标的真正方法是在window.location.href = 'new_link';中计算id以test-clone-开头的div元素。

editorDesignView

var cloneCount = $("#editorDesignView").find("div[id^='test-clone-']").length+1;现在保留了要删除元素的数字。

对于拖动的克隆（重新排序），这是相同的这将确保正确的数字。

实际上，如果您重新排序克隆，则最后一个元素是引用，可能没有最高的数字。

所以这是你的updated Fiddle。

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

2 个答案: