Question

尝试使用jqueryUI。我有一个列表，其中包含我想要放入网格系统的组件。像一个desiger的东西。我有一个div

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

我将div放在这个div中：

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

我想要的结果是，当我放弃component1 div insde 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

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

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

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

3 个答案: