Question

以下是我的代码。当我拖放“.dragme”div时，此div的父级将从“#source”更改为“#drop”。没关系。但是这个dragme div的位置在#drop div中被修复了，我无法在#drop div中移动它。我该怎么做？谢谢。

HTML：

       <div id="source" class="box">
                <div class="dragme">bacon</div>

       </div>
       <div id="drop" class="box"></div>

CSS：

     .box { height:100px;width:100px;border:1px solid #333; }
     .dragme { width:100%; margin:5px; border:1px solid #333; }

JavaScript的：

     $('.dragme').draggable();
     $('#drop, #source').droppable({
     drop:function(e, ui) {
             $(e.target).append($(ui.draggable).detach().css({'top':'', 'left':''}));
     }
     });

Answer 1

这是Demo Fiddle。

 $('.dragme').draggable();
     $('#drop, #source').droppable({
         drop:function(e, ui) {
         //$(e.target).append($(ui.draggable).detach().css({'top':'', 'left':''}));  //removed this line.
     }
 });

您正在设置css .css({'top':'', 'left':''})，这就是您无法移动它的原因。

Answer 2

您的代码将拖动的元素位置设置为TOP LEFT，这就是您无法将该元素拖动到其他位置的原因。要避免此问题，只有在将元素拖出父容器时才更新位置。

更新代码：

$('.dragme').draggable();
$('#drop, #source').droppable({
    drop:function(e, ui) {
        if ($(e.target).attr('id') != $(ui.draggable).parent().attr('id')) {     
            $(e.target).append($(ui.draggable).detach().css({'top':'', 'left':''}));
        }
    }
});

小提琴：http://jsfiddle.net/LHGqP/1/

更改其父级后将div移动到父div中的任何位置

2 个答案: