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

试图使用jqueryUI。我有一个列表，其中包含我想放入gridsystem的组件。像一个设计师的东西。 我有一个潜水艇

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

我把上面的div放在这个div中：

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

我想要的结果是，当我在

GridDiv

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

---

有什么办法吗？我找不到它。

在下列情况下，您必须自己移动元件：

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

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

---

下面是一个

由于在附加到另一个div时拖动的元素的样式存在问题（有关详细信息，请参阅），下面是另一种方法：

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

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

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

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

draggable.resizable();

参考

---

以上所有答案都不正确，因为所有输出都放在窗口顶部，例如，对象放在顶部：0px和左侧：0px位置。 试试下面

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

---

在工作中，我也有过类似的经历。dropable.append（draggable.remove（））；这去除可能是他们的问题吗？因为我的div没有得到依偎：（修复。现在检查答案！您的accept属性

#component1

必须是

#component1

@user3510507有没有按照@nanndoj指出的那样更正您的ID，

应该只有

。与您的另一个div相同…我用php打印了一个div，并且它不起作用。现在我在t中做了一个div。）然后它就可以工作了…你知道当组件在网格内时，我如何移动它并调整它的大小吗？

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