拖动Jquery拖出它的父jquery对话框

Question

我有一个充满可拖动对象的jquery对话框.可放置目标位于对话框之外.

当我启动拖动时,droppable会正确响应(视觉指示它是一个可放置的目标),并且在丢弃之后正确的事件触发,因此我可以正确处理掉落.

问题是拖动的对象仅在对话框中保持可见,并且不会"跳出".

我已经有可拖动从一个可滚动的div拖动到另一个没有问题的拖动,但从一个对话框到包含该对话框的页面它不起作用.对话框内容在任何拖动方向上滚动.

我的可拖动论点如下:

var draggableArguments={
     revert: 'invalid',
     helper:'clone',
     containment: 'DOM',
     zIndex: 999,
     addClasses: false
    }

   theObject.draggable(draggableArguments);

任何建议,以便我的可拖动对象可以跨越对话框边界？

谢谢.

Answer 1

固定,实际上很简单.

我只需要在draggable上使用appendTo选项,以便将帮助器附加到我希望它拖动的元素(例如#page,包含我的页面的div).这将从对话框中删除它(它具有"overflow:auto"属性,该属性添加滚动条以扩展画布以使drag元素始终在其中)并将其附加到#page元素.

唯一的问题是我的对话框有一个非常高的zIndex,所以我只是增加了zIndex选项.

var draggableArguments={
     revert: 'invalid',
     helper:'clone',
     appendTo: '#page',
     containment: 'DOM',
     zIndex: 1500,
     addClasses: false
}

theObject.draggable(draggableArguments);