在表格中使用 jQuery 拖放来为每次拖动创建一个副本

Posted 2023-05-08

【中文标题】在表格中使用 jQuery 拖放来为每次拖动创建一个副本

【英文标题】：drag & drop using jQuery in a table to create a copy for every drag

【发布时间】：2021-06-17 15:17:54

【问题描述】：

我正在使用 jQuery 在表格中拖放，要求就像我将图像拖到多个单元格（一个接一个）我正在动态添加一个 div 和 div s，我正在添加 span明智的文本我希望所有的单元格都这样。我正在尝试将 clone() 用于撰写，以便我们可以创建副本，但是当我拖动跨度文本时，它也在创建“div”的副本。请运行 sn-p 并查看问题。

请回复。

提前致谢:)

$(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>

【问题讨论】：

这完全符合预期。你预计会发生什么？

是的，我认为由于 clone() 方法，当拖动 文本时，这两个图像再次复制到同一个单元格中，有没有一种方法可以在单独的函数中编写 droppable 并使用它，以便一个单元格撰写不会出现两次。

【参考方案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>