使用 jQuery 在表格中拖放使用两个可拖放功能

如何解决使用 jQuery 在表格中拖放使用两个可拖放功能

我使用 jQuery 来满足我的拖放要求，我知道为什么不能在这里工作的原因是我下面的代码我的要求是首先当我将图像拖到表格单元格中然后我启用/显示一个 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 块被启用/附加在表格单元格内，之后当我们将跨度拖到表格单元格内的 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>",{
    src: "abc.png"
  }).appendTo($("p:eq(1)",compose));


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

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

  $("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 元素被放入表格中时，它们之前并不存在于 DOM 中。这意味着初始 droppable 从未在它们上初始化。

为了解决这个问题，需要在 droppable 存在于 DOM 之后对其进行初始化。

使用 jQuery 在表格中拖放使用两个可拖放功能

如何解决使用 jQuery 在表格中拖放使用两个可拖放功能

解决方法

相关推荐