2

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

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

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

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

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

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

我尝试了各种方法来在插入和退出之前保存可拖动的位置,但它们没有奏效。方法是:方法1:

.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);
            }

方法二:

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

4

1 回答 1

0

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

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

于 2012-09-13T11:07:47.260 回答