Droppable 创建（未）嵌套对象 - 但可拖动的位置发生了变化答案

【问题标题】：Droppable creates (un)nested object - But the position of draggable changesDroppable 创建（未）嵌套对象 - 但可拖动的位置发生了变化
【发布时间】：2012-07-19 07:41:08
【问题描述】：

我正在将一个对象拖动到一个可拖放对象中，该对象也是一个可拖动对象。放置对象后，它嵌套在可放置对象中。同样，如果我将对象拖到 droppable 之外，它就不再嵌套了。

但是，如果我经常拖入和拖出可放置对象，则可拖动对象最终会位于不同的位置。

代码在http://jsfiddle.net/sandeepy02/kTAL3/41/

您可以通过创建对象“房间”并将“表格”拖入其中来复制问题。然后移动“房间”，“桌子”随之移动。但是，如果您将“桌子”拖出房间，然后拖入并拖出“桌子”，它会突然重新定位。

编辑为了澄清我用来将拖动的项目附加到可放置项的代码是：

.droppable({
            drop: function(event, ui) {
                $(this).append(ui.draggable);
            },
            out: function(event, ui) {
                $("#boundaryContainer").append(ui.draggable);
            }

我尝试了各种方法来在拖放之前保存可拖动对象的位置，但它们没有奏效。方法是：方法一：

.droppable({
            drop: function(event, ui) {
                var position = ui.draggable.offset();
                ui.draggable.appendTo($(this)).css(position);
            },
            out: function(event, ui) {
                var position = ui.draggable.offset();
                ui.draggable.appendTo("#boundaryContainer").css(position);
            }

方法2：

.droppable({
            drop: function(event, ui) {
                var tempLeft= ui.draggable.position().left;
                var tempRight= ui.draggable.position().right;
                $(this).append(ui.draggable);
                ui.draggable.position().left = tempLeft;
                ui.draggable.position().right= tempRight;
            },
            out: function(event, ui) {
                var tempLeft= ui.draggable.position().left;
                var tempRight= ui.draggable.position().right;
                $("#boundaryContainer").append(ui.draggable);
                ui.draggable.position().left = tempLeft;
                ui.draggable.position().right= tempRight;
            }

方法 3 :(

http://jsfiddle.net/sandeepy02/kTAL3/53/

【问题讨论】：

1.创建房间。 2. 创建表。 3. 将表格拖入房间。 4. 把房间搬到别处。 5. 拖动表格。我看到表格似乎缩小了一些偏移量。是这个问题吗？
是的，杰瑞德……这就是问题所在。

标签： jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

这里的问题是，在您将第二个可拖动对象附加到可放置对象后，它就会成为其中的一部分。您在此处的容差是默认容差，拖动光标不会重新定位。因此，无论您是否拖动内部元素，它实际上都不会离开父元素，因为光标始终位于其顶部并且它是其父元素的一部分。在这种情况下，out 永远不会触发。

您可以通过我对您的fiddle 稍作修改来测试该行为。（修改是 cursorAt: { top: -10, left: -10 } 在第二个可拖动中。请注意，它仍然无法像您期望的那样工作，因为一旦将可拖动元素附加到父容器元素就会重新定位，这是预期的。您应该考虑将 droppables 和 draggables 保存在两个单独的父容器中，因为这样当您分离它们时，当它们重新连接回同一个父容器时，您不会遇到它们相对于另一个重新定位的问题。

【讨论】：