隐藏在容器外部的可拖动元素 [英] Draggable element hidden outside container
问题描述
使用jQuery UI，我试图创建一个带有两个可滚动容器的接口，每个容器包含许多可拖动元素.用户可以将元素从一个容器拖动到另一个容器.
删除功能不是问题.拖放后，该元素将被分离并在其新父元素下的正确位置重新创建.
我的问题是当容器应用了position:relative;时，可拖动元素无法显示在其容器外部，因此在拖动时，当该元素拖动到容器边界之外时，该元素将消失. /p>
此默认行为是有道理的，因为通常用户会希望将元素拖动到其容器中.作为一种解决方法，我认为解决方案是使用可拖动属性'appendTo'，我认为该属性会将元素移出容器，但不幸的是，这似乎没有任何作用.
DOM :(每个视图都是可滚动的，并且每个容器都具有position:relative，并且与容纳所有元素所需的大小一样大)
BODY
VIEW 1
CONTAINER
DRAGGABLE ELEMENTS
VIEW 2
CONTAINER
DRAGGABLE ELEMENTS
JavaScript:
$('div.card').draggable({
appendTo: 'body',
scroll: false //stops scrolling container when moved outside boundaries
});
有关该问题的简化说明，请参见JSFiddle.我不想用可投放的代码夸大示例，因此这仅说明了拖动问题. http://jsfiddle.net/Em7Ak/
非常感谢.
我不确定这是否可以解决您的确切问题，但是我遇到了这个问题，正在寻找相同的答案，这就是我所发现的.
在.draggable()的选项中，传入helper:'clone'以自动克隆该项目，以便可以将其拖出容器.并使用appendTo:'body'将其放在<body>标记的末尾.因此，在我的情况下，我的选项看起来像这样，如果未将其放置在有效位置，请添加revert:'invalid'使其回弹:
jQuery(".myselector").draggable({
helper: 'clone',
revert: 'invalid',
appendTo: 'body'
});
Using jQuery UI, I am trying to create an interface with two scrollable containers, each containing many draggable elements. The user can drag an element from one container to the other.
The dropping feature is not an issue. When dropped, the element is detached and recreated in the right place under its new parent.
My problem is that the draggable element cannot be displayed outside its container when the container has position:relative; applied, so while dragging, the element will disappear when it is moved outside the container boundaries.
This default behaviour makes sense, as normally the user would want to drag an element inside its container. As a workaround I had assumed the solution would be to use the draggable property 'appendTo', which I thought would move the element outside its container, but unfortunately this hasn't seemed to have had any effect.
DOM: (each view is scrollable and each container has position:relative and is as large as it needs to be to hold all elements)
BODY
VIEW 1
CONTAINER
DRAGGABLE ELEMENTS
VIEW 2
CONTAINER
DRAGGABLE ELEMENTS
Javascript:
$('div.card').draggable({
appendTo: 'body',
scroll: false //stops scrolling container when moved outside boundaries
});
Please see JSFiddle for a simplified explanation of the problem. I didn't want to bloat the example with droppable code, so this just illustrates the dragging issue. http://jsfiddle.net/Em7Ak/
Many thanks in advance.
I'm not sure if this will fix your exact problem, but I came across this question looking for the same answer and this is what I found.
In the options for .draggable(), pass in helper:'clone' to make a clone of the item automatically so that it can be dragged out of the container. And use appendTo:'body' to put it at the end of the <body> tag. So in my case, my options look somewhat like this, adding in revert:'invalid' to cause it to spring back if it isn't dropped somewhere valid:
jQuery(".myselector").draggable({
helper: 'clone',
revert: 'invalid',
appendTo: 'body'
});
这篇关于隐藏在容器外部的可拖动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
