Question

我在一个也可拖动的droppable中拖动一个对象。删除对象后，它嵌套在droppable中。同样，如果我将对象拖到droppable外部，它就不再嵌套了。

但是，如果我经常拖入并拖出可放置的拖放器，则拖动器会在不同的位置结束。

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

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

修改澄清我用来将拖动的项目附加到droppable的代码是：

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

方法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

这里的问题是，在将第二个draggable附加到droppable之后，它就成了它的一部分。此处的公差是默认值，拖动光标未重新定位。因此，无论您是否正在拖动内部元素，它实际上都不会离开父元素，因为光标始终位于它的顶部，并且它是它的父元素的一部分。在这种情况下，永远不会发射。

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

Droppable创建（un）嵌套对象 - 但是draggable的位置会发生变化

1 个答案: