使用 jQuery 在 table 中拖放（使用两个可拖放功能）

Question

我正在使用 jQuery 来满足我的拖放要求，我知道为什么不在这里工作的原因是我的下面的代码我的要求就像首先将图像拖到 table 单元格中然后我是 enabling/showing 一个 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 块在 table 单元格内 enabled/attached 然后当我们将跨度拖到 div 上时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) {
      $("#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>

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

要更正此问题，需要在 DOM 中存在 droppable 后对其进行初始化。

使用 jQuery 在 table 中拖放（使用两个可拖放功能）

Drag & Drop in table using jQuery (using two draggable,droppable functions)

html

javascript

css

jquery

jquery-ui