jquery - Droppable 创建(未)嵌套对象 - 但可拖动的位置发生变化

Question

我正在将一个对象拖动到一个可拖放的对象内，该对象也是可拖动的。放置对象后，它会嵌套在可放置对象内。同样，如果我将对象拖到可放置的外部，它就不再嵌套。

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

代码位于 http://jsfiddle.net/sandeepy02/kTAL3/41/

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

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

.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/

Answer 1

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

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