如何将 div 拖放到另一个 div 中并使整个元素跟随？

Question

正在尝试使用 jqueryUI。我有一个列表，其中包含我想放入网格系统中的组件。就像一个设计者的东西。我有一个 div 有

$( "#Component1" ).draggable();

我把上面的 div 放在这个 div:

$( "#GridDiv" ).droppable({
    accept: "#component1"
});

我想要的结果是，当我将 component1 div 放入 GridDiv

时

<div id="#GridDiv">
   <div id="#Component1"></div>
</div>

有方法吗？我找不到它..

Answer 1

drop event之后需要自己移动元素:

$( "#GridDiv" ).droppable({
    accept: "#Component1",
    drop: function( event, ui ) {
       var droppable = $(this);
       var draggable = ui.draggable;
       // Move draggable into droppable
       draggable.appendTo(droppable);
    }
});

PS：您不需要在 ID 字段中使用#：

<div id="GridDiv">
   <div id="Component1"></div>
</div>

这是一个working example

Answer 2

由于在附加到另一个 div 时拖动元素的样式存在问题（有关详细信息，请参阅 here），这里有另一种方法供您使用：

$('#GridDiv').droppable({
    accept: "#Component1",
    drop: function (event, ui) {
        var draggable = ui.draggable;
        var offset = draggable.offset();
        draggable.appendTo( this ).offset( offset );
    }
});

Demo

以下演示略有不同：它删除了原始拖动元素，因此拖动功能丢失了：

$('#GridDiv').droppable({
    accept: "#Component1",
    drop: function (event, ui) {
        var draggable = ui.draggable;
        var offset = draggable.offset();
        draggable.remove().appendTo( this ).offset( offset );
    }
});

Demo 2

要在拖放后调整可拖动对象的大小，您可以使用：

draggable.resizable();

Demo 3

参考

.offset()

.appendTo()

.droppable() - drop-option

.remove()

Answer 3

以上所有都不是正确和准确的答案，因为所有输出都放在window的顶部，例如，对象放在top:0px和left:0px的位置。试试下面

var droppable = $(this);
var draggable = ui.draggable;
ui.draggable.position({ of: $(this), my: 'left top', at: 'left top' });

如何将 div 拖放到另一个 div 中并使整个元素跟随？

How to drag and drop a div inside another div and make that the whole element follow?

javascript

jquery

drag-and-drop

jquery-ui