jQuery ui 可拖动元素在滚动 div 之外不能“拖动" [英] jQuery ui draggable elements not 'draggable' outside of scrolling div
问题描述
我在一个 div 中有很多元素(浮动 href 标记)，它们具有设置的高度/宽度，滚动设置为 CSS 中的 overflow: auto.
I have many elements (floating href tags) in a div with a set height/width, with scroll set to overflow: auto in the CSS.
这是 div 的结构:
This is the structure of the divs:
<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>
父 div 的 'tf_div_tagsReturn' 和 'tf_div_tagsDrop' 最终将彼此相邻.
the parent div's, 'tf_div_tagsReturn' and 'tf_div_tagsDrop' will ultimately float next to each other.
这是在使用类名tag_cell"创建所有可拖动"元素之后运行的 jQuery，:
Here is the jQuery which is run after all of the 'draggable' elements have been created with class name 'tag_cell', :
$(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();
}
});
});
如上所述，可拖动元素在 div 'tf_div_tagsReturn' 内是可拖动的，但它们不会在视觉上拖动到父 div 之外.值得注意的是，如果我拖动其中一个可拖动元素，并将鼠标移到可放置的 div 上，id 为 'tf_dropBox'，然后悬停类被触发，我就再也看不到可拖动元素了.
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.
这是我第一次使用 jQuery，所以希望我只是遗漏了一些非常明显的东西.到目前为止，我一直在阅读文档和搜索论坛，但没有成功:(
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 :(
更新:
非常感谢 Jabes88 提供的解决方案，使我能够实现我正在寻找的功能.这是我的 jQuery 最终的样子:
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:
$(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();
}
});
});
推荐答案
你的可拖动对象是否允许多个实例?然后使用 helper 和 append 选项:
Are you going to allow more than one instance with your draggable objects? then use the helper and append option:
$(".tag_cell").draggable({
helper: 'clone',
appendTo: 'div#myHelperHolder'
});
然后在你的 css 中你可以将 div#myHelperHolder 的 zindex 设置为 999.如果没有，请尝试仅使用 zindex 选项:
Then in your css you can set the zindex of div#myHelperHolder to be 999. If not, then try just using the zindex option:
$(".tag_cell").draggable({
zIndex: 999
});
我还会考虑设置 addClasses 以阻止插件添加所有浪费处理器速度的烦人类.
I would also consider setting addClasses to stop the plugin from adding all those annoying classes that waste processor speed.
更新:我有一个新的解决方案
好吧，玩了一会儿之后，我想到了这个:滚动选项不会阻止孩子被溢出隐藏.我已经阅读了其他一些帖子，但我找不到单一的解决方案.但我想出了一个完成工作的方法.
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;
现在我们已经阻止了助手被移除，但它仍然保留在div#tagFun_div_helper"中，而原来的可拖动项目又重新出现了.
Now we have stopped the helper from being removed but it remains in "div#tagFun_div_helper" while the original draggable item has reappeared.
ui.helper.appendTo(this);
这会将助手从div#tagFun_div_helper"转移到我们的放置区.
This will transfer the helper from "div#tagFun_div_helper" into our drop zone.
dropped = true;
这将告诉我们的停止函数从组中删除原始项目，而不是删除.hide"类.希望对您有所帮助！
This will tell our stop function to delete the original item from the group instead of removing the ".hide" class. Hope that helps!
这篇关于jQuery ui 可拖动元素在滚动 div 之外不能“拖动"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
