在 table 中使用 jQuery 拖放，为每次拖动创建一个副本

Question

我在 table 中使用 jQuery 进行拖放，要求就像我将图像拖到多个单元格（一个一个地）时我正在动态添加一个 div 和 div s，我正在向所有单元格添加我想要的跨度文本。我正在尝试使用 clone() 进行撰写，这样我们就可以创建副本，但是当我拖动跨度文本时，它也会创建 'div' 的副本。请运行片段并查看问题。

请回复。

提前致谢:)

$(function() {
  var compose = $("<div>", {
    id: "data-hide",
    class: "db-click"
  });
  $("<p>", {
    class: "margin5 strong drop-able"
  }).appendTo(compose);
  $("<img>", {
    src: "xyz.png"
  }).appendTo($("p", compose));
  $("<p>", {
    class: "margin5 strong drop-able"
  }).appendTo(compose);
  $("<img>", {
    src: "abc.png"
  }).appendTo($("p:eq(1)", compose));


  $("#init").draggable({
    opacity: 0.5,
    helper: "clone",
  });

  $(".drag-able").draggable({
    opacity: 0.5,
    helper: "clone",
  });

  $("td").droppable({
    tolerance: 'pointer',
    drop: function(event, ui) {
    $(compose).clone().appendTo(this);
   
      $(".drop-able").droppable({
        drop: function(event, ui) {
          $(this).append(ui.draggable.clone());
        }
      });
    }
  });

});

#slot  {
  border: 1px dashed black;
  width: 100px;
  height: 40px;
}
#slot1  {
  border: 1px dashed black;
  width: 100px;
  height: 40px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div><img src="xyz.png" id="init" /></div>
<div class="textdata">
  <span class="drag-able">hello</span>
  <span class="drag-able">morning</span>
</div>
<table>
  <tr style="border : 1px dotted rgba(0, 0, 0, 0.15);">
    <td id="slot"></td>
    <td id="slot1"></td>
  </tr>
</table>

Answer 1

我修改了一些东西，这就可以了。

$(function() {
  var compose = $("<div>", {
    id: "data-hide",
    class: "db-click"
  });
  $("<p>", {
    class: "margin5 strong drop-able"
  }).appendTo(compose);
  $("<img>", {
    src: "xyz.png"
  }).appendTo($("p", compose));
  $("<p>", {
    class: "margin5 strong drop-able"
  }).appendTo(compose);
  $("<img>", {
    src: "abc.png"
  }).appendTo($("p:eq(1)", compose));


  $("#init").draggable({
    opacity: 0.5,
    helper: "clone",
  });

  $(".drag-able").draggable({
    opacity: 0.5,
    helper: "clone",
  });

  $("td").droppable({
    tolerance: 'pointer',
    drop: function(event, ui) {
    
    $("td").droppable('enable');
    $(compose).clone().appendTo(this);
   
      $(".drop-able").droppable({
        drop: function(event, ui) {
          $(this).append(ui.draggable.clone());
        }
      });
      
      if($(this).has('#data-hide').length) {
                        $(this).droppable('disable');
                }
    }
  });

});

#slot  {
  border: 1px dashed black;
  width: 100px;
  height: 40px;
}
#slot1  {
  border: 1px dashed black;
  width: 100px;
  height: 40px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div><img src="xyz.png" id="init" /></div>
<div class="textdata">
  <span class="drag-able">hello</span>
  <span class="drag-able">morning</span>
</div>
<table>
  <tr style="border : 1px dotted rgba(0, 0, 0, 0.15);">
    <td id="slot"></td>
    <td id="slot1"></td>
  </tr>
</table>

在 table 中使用 jQuery 拖放，为每次拖动创建一个副本

drag & drop using jQuery in a table to create a copy for every drag

html

jquery

jquery-ui