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

Answer 2

你必须这样做：

$('.my_draggable').draggable({
  helper:'clone',
  appendTo: 'body',
  scroll: false
});

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

2 个答案: