jQuery ui 可拖动元素在滚动 div 之外不可“拖动”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2098387/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery ui draggable elements not 'draggable' outside of scrolling div
提问by Seth
I have many elements (floating href tags) in a div with a set height/width, with scroll set to overflow: autoin the CSS.
我在一个 div 中有许多元素（浮动 href 标签），它们具有设置的高度/宽度，overflow: auto在 CSS 中设置为滚动。
This is the structure of the divs:
这是div的结构：
<div id="tagFun_div_main">
<div id="tf_div_tagsReturn">
<!-- all the draggable elements go in here, the parent div scolls -->
</div>
<div id=" tf_div_tagsDrop">
<div id="tf_dropBox"></div>
</div></div>
the parent div's, 'tf_div_tagsReturn' and 'tf_div_tagsDrop' will ultimately float next to each other.
父 div 的 'tf_div_tagsReturn' 和 'tf_div_tagsDrop' 最终将彼此相邻浮动。
Here is the jQuery which is run after all of the 'draggable' elements have been created with class name 'tag_cell', :
这是在使用类名“tag_cell”创建所有“可拖动”元素后运行的 jQuery：
$(function() {
$(".tag_cell").draggable({
revert: 'invalid',
scroll: false,
containment: '#tagFun_div_main'
});
$("#tf_dropBox").droppable({
accept: '.tag_cell',
hoverClass: 'tf_dropBox_hover',
activeClass: 'tf_dropBox_active',
drop: function(event, ui) {
GLOBAL_ary_tf_tags.push(ui.draggable.html());
tagFun_reload();
}
});
});
as I stated above, the draggable elements are draggable within div 'tf_div_tagsReturn', but they do not visually drag outside of that parent div. worthy to note, if I am dragging one of the draggable elements, and move the mouse over the droppable div, with id 'tf_dropBox', then the hoverclass is fired, I just can't see the draggable element any more.
正如我上面所说，可拖动元素在 div 'tf_div_tagsReturn' 内是可拖动的，但它们不会在视觉上拖动到该父 div 之外。值得注意的是，如果我拖动可拖动元素之一，并将鼠标移到可放置的 div 上，id 为 'tf_dropBox'，然后悬停类被触发，我就再也看不到可拖动元素了。
This is my first run at using jQuery, so hopefully I am just missing something super obvious. I've been reading the documentation and searching forums thus far to no prevail :(
这是我第一次使用 jQuery，所以希望我只是错过了一些非常明显的东西。到目前为止，我一直在阅读文档和搜索论坛，但没有成功:(
UPDATE:
更新：
many thanks to Jabes88 for providing the solution which allowed me to achieve the functionality I was looking for. Here is what my jQuery ended up looking like:
非常感谢 Jabes88 提供的解决方案使我能够实现我正在寻找的功能。这是我的 jQuery 最终的样子：
$(function() {
$(".tag_cell").draggable({
revert: 'invalid',
scroll: false,
containment: '#tagFun_div_main',
helper: 'clone',
start : function() {
this.style.display="none";
},
stop: function() {
this.style.display="";
}
});
$(".tf_dropBox").droppable({
accept: '.tag_cell',
hoverClass: 'tf_dropBox_hover',
activeClass: 'tf_dropBox_active',
drop: function(event, ui) {
GLOBAL_ary_tf_tags.push(ui.draggable.html());
tagFun_reload();
}
});
});
回答by Justin Bull
Are you going to allow more than one instance with your draggable objects? then use the helper and append option:
您是否打算允许多个可拖动对象的实例？然后使用 helper 和 append 选项：
$(".tag_cell").draggable({
helper: 'clone',
appendTo: 'div#myHelperHolder'
});
Then in your css you can set the zindex of div#myHelperHolder to be 999. If not, then try just using the zindex option:
然后在您的 css 中，您可以将 div#myHelperHolder 的 zindex 设置为 999。如果没有，请尝试仅使用 zindex 选项：
$(".tag_cell").draggable({
zIndex: 999
});
I would also consider setting addClasses to stop the plugin from adding all those annoying classes that waste processor speed.
我还会考虑设置 addClasses 来阻止插件添加所有那些浪费处理器速度的烦人的类。
UPDATE: I HAVE A NEW SOLUTION
更新：我有一个新的解决方案
Okay after playing with it for a bit I came up with this: the scroll option doesn't stop the child from being hidden with overflow. I've read some other posts and I cant find a single solution. But I came up with a bit of a work-a-round that gets the job done.
好吧，在玩了一会儿之后，我想出了这个：滚动选项不会阻止孩子被溢出隐藏。我已经阅读了其他一些帖子，但找不到单一的解决方案。但是我想出了一些可以完成工作的工作。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.0");
google.load("jqueryui", "1.7.2");
google.setOnLoadCallback(OnLoad);
function OnLoad(){
var dropped = false;
$(".tag_cell").draggable({
addClasses: false,
revert: 'invalid',
containment: '#tagFun_div_main',
helper: 'clone',
appendTo: '#tagFun_div_helper',
start: function(event, ui) {
dropped = false;
$(this).addClass("hide");
},
stop: function(event, ui) {
if (dropped==true) {
$(this).remove();
} else {
$(this).removeClass("hide");
}
}
});
$("#tf_dropBox").droppable({
accept: '.tag_cell',
hoverClass: 'tf_dropBox_hover',
activeClass: 'tf_dropBox_active',
drop: function(event, ui) {
dropped = true;
$.ui.ddmanager.current.cancelHelperRemoval = true;
ui.helper.appendTo(this);
}
});
}
</script>
<style>
div#tagFun_div_main { display:block; width:800px; height:400px; margin:auto; padding:10px; background:#F00; }
div#tf_div_tagsReturn { display:block; width:200px; height:100%; float:left; overflow:auto; background:#000; }
div#tf_div_tagsDrop { display:block; width:200px; height:100%; float:right; background:#0F0; }
div#tf_dropBox { display:block; width:100%; height:250px; background:#F0F; }
span.tag_cell { display:block; width:25px; height:25px; margin:1px; float:left; cursor:pointer; background:#0FF; z-index:99; }
span.tag_cell.hide { display:none; }
div#tf_dropBox.tf_dropBox_hover { background:#FFF !important; }
div#tf_dropBox.tf_dropBox_active { background:#333; }
</style>
</head>
<body>
<div id="tagFun_div_main">
<div id="tf_div_tagsReturn">
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
</div>
<div id="tf_div_tagsDrop">
<div id="tf_dropBox"></div>
</div>
</div>
<div id="tagFun_div_helper">
<!-- this is where the helper gets appended for temporary use -->
</div>
</body>
</html>
I pasted my entire code so you can try it out. Here is a brief description: When you start to drag an item it hides the original, clones it, then appends the clone to a container outside the overflow area. Once dropped it removes the original and moves the clone into the drop zone. Great so now we have fixed that overflow issue but run into some others. When you drop the clone item into the drop zone it disappears. To stop that from happening I used this method:
我粘贴了我的整个代码，以便您可以尝试。这是一个简短的描述：当您开始拖动一个项目时，它会隐藏原始项目，克隆它，然后将克隆附加到溢出区域外的容器中。删除后，它会删除原始副本并将克隆移动到放置区。太好了，现在我们已经修复了溢出问题，但遇到了其他一些问题。当您将克隆物品放入放置区时，它会消失。为了阻止这种情况发生，我使用了这种方法：
$.ui.ddmanager.current.cancelHelperRemoval = true;
Now we have stopped the helper from being removed but it remains in "div#tagFun_div_helper" while the original draggable item has reappeared.
现在我们已经阻止了 helper 被移除，但它仍然保留在 "div#tagFun_div_helper" 中，而原始的可拖动项目重新出现。
ui.helper.appendTo(this);
This will transfer the helper from "div#tagFun_div_helper" into our drop zone.
这会将助手从“div#tagFun_div_helper”转移到我们的放置区。
dropped = true;
This will tell our stop function to delete the original item from the group instead of removing the ".hide" class. Hope that helps!
这将告诉我们的 stop 函数从组中删除原始项目，而不是删除“.hide”类。希望有帮助！
回答by capsula
In my case, this solved it for me and works perfectly!
就我而言，这为我解决了这个问题并且完美运行！
UPDATED
更新
$(".amigo").draggable({
revert: "invalid" ,
helper: function(){
$copy = $(this).clone();
return $copy;},
appendTo: 'body',
scroll: false
});
