使用 jQuery 在表格中拖放（使用两个可拖放的函数）答案

【问题标题】：Drag & Drop in table using jQuery (using two draggable,droppable functions)使用 jQuery 在表格中拖放（使用两个可拖放的函数）
【发布时间】：2021-06-16 21:22:08
【问题描述】：

我正在使用 jQuery 来满足我的拖放要求，idk 不在这里工作的原因是我的以下代码我的要求是首先当我将图像拖到表格单元格中然后我启用/显示一个 div 稍后我将一个跨度拖动到新显示的 div 拖动图像时启用该跨度然后跨度在里面是不可放置的启用 div idk 为什么需要帮助我是 jQuery 新手。

 compose='';
 compose +='<div id="data-hide" class="db-click">'; 
  compose +='<p class="margin5 strong drop-able ">'; 
    compose +='<img src="xyz.png" /></p>'; 
     compose +='<p class="margin5 strong drop-able">';
   compose +='<img src="abc.png" /></p></div>'; 


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

     $("td").droppable({
        tolerance: 'pointer',
         drop: function(event, ui) {
            $("#slot").html(compose);
        }, 
        
    }); 

     $(".drag-able").draggable({
        opacity: 0.5,
        helper :"clone",
     }); 
     
      $(".drop-able").droppable({
        drop : function(event,ui){
            $(this).append(ui.draggable.clone());
        } 
     });

<html>
<head>
</head>
<body>

<div><img src="xyz.png" id="init"/></div>

<div class="textdata">
<span class="drag-able">hello</span>
</div>

<table>
<tr>
<td id="slot"></td>
</tr>
</table>

</body>
</html>

所以问题是在拖动图像后，组合的 div 块在表格单元格内启用/附加，之后当我们将 span 拖到表格单元格内的 div 上时，不会删除 span 文本。

提前致谢。

【问题讨论】：

您的 <p class="margin5 strong drop-able "> 不能与 $(".drop-able").droppable({ 一起使用，因为当 $(".drop-able").droppable({ 代码运行时，新 p 不是 dom 的一部分
那么我必须做什么。？我必须使用 span/div 来代替 p 吗？
不，和元素类型无关，要绑定.droppable()到新创建的元素
$("td").droppable({ drop: function(event, ui) { $("#slot").html(compose); //$("p").droppable (); //$(".drop-able").droppable(); $("#data-hide").droppable(); }, });我已经进行了这些更改，但没有任何效果。

标签： javascript html jquery css jquery-ui

【解决方案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) {
      $("#slot").html(compose);
      $("#slot .drop-able").droppable({
        drop: function(event, ui) {
          $(this).append(ui.draggable.clone());
        }
      });
    }
  });

});

#slot {
  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>
</div>
<table>
  <tr>
    <td id="slot"></td>
  </tr>
</table>

正如 cmets 中提到的，当 HTML 元素被放入表中时，它们以前并不存在于 DOM 中。这意味着最初的 droppable 从未在它们上初始化。

要纠正这个问题，需要在 droppable 存在于 DOM 之后对其进行初始化。

【讨论】：

是的，它正在工作，但编写语法对我来说有点新，我想在
标签内添加文本我该怎么做我尝试通过添加文本属性但不工作。无论如何谢谢你@Twisty。
@UttamKonduru 你可以使用.text() 但.html() 可能会更好。 $("<p>", { class: "margin5 strong drop-able" }).html("Some Text").appendTo(compose);
好吧..但这究竟意味着什么-> appendTo($("p:eq(1)", compose));即 p:eq(1) ，为什么当我在它们之间添加新的
时我会问 cuz，然后 droppable 又不起作用。
@UttamKonduru 它是在compose 中找到的第二个p 元素的选择器。