提问者:小点点

使用jQuery在表中拖放(使用两个可拖放的函数)


我使用jQuery来满足我的拖放需求,为什么不能在这里工作是我下面的代码,我的需求是:首先,当我将图像拖到表格单元格中时,我要启用/显示一个div;然后,我要将一个跨度拖到新显示的div中,当图像被拖动时,这个跨度就不能在启用的div中拖放了。为什么需要帮助我是jQuery的新手。

null

 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>

null

因此,问题是拖动图像后,组成的div块被启用/附加在表格单元格内,之后,当我们将跨距拖动到表格单元格内的div上时,并没有删除跨距文本。

提前道谢。


共1个答案

匿名用户

请考虑以下内容。

null

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