我有很多元素(浮动href标签)在一个div与设置的高度/宽度，滚动设置为“溢出：自动”在CSS。
这是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’最终将浮动在彼此旁边。
这里是在所有’draggable’元素创建类名’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();
}
});
});
如上所述，可拖动元素可以在div’tf_div_tagsReturn’中拖动，但是它们不会在父div的外部拖动。值得注意，如果我拖动其中一个可拖动元素，并将鼠标移动到droppable div，id’tf_dropBox’，然后hoverclass被触发，我只是看不到draggable元素了。
非常感谢任何建议，帮助我找到一个解决方案。这是我第一次使用jquery，所以希望我只是错过了一些超级明显的东西。我一直在阅读文档和搜索论坛迄今为止没有prevailing：
感谢您的时间。
更新：
很多感谢Jabes88提供的解决方案，让我实现我所寻找的功能，这里是我的jquery最终看起来像，随时评论它，因为我是新的jquery。
$(function() {
$(".tag_cell").draggable({
revert: 'invalid',containment: '#tagFun_div_main',helper: 'clone',start : function() {
this.style.display="none";
},stop: function() {
this.style.display="";
}
});
$(".tf_dropBox").droppable({
accept: '.tag_cell',ui) {
GLOBAL_ary_tf_tags.push(ui.draggable.html());
tagFun_reload();
}
});
});
谢谢Jabes88，你是我的救主！作品漂亮:)
解决方法
$(".tag_cell").draggable({
helper: 'clone',appendTo: 'div#myHelperHolder'
});
然后在您的css中，您可以将div#myHelperHolder的zindex设置为999。
如果没有，那么尝试使用zindex选项：
$(".tag_cell").draggable({
zIndex: 999
});
我也会考虑设置addClasses来阻止插件添加所有那些恼人的类，浪费处理器的速度。
更新：我有一个新的解决方案
好吧，玩了一会儿我想出了这个：滚动选项不会阻止孩子被隐藏溢出。我读了一些其他的职位，我找不到一个单一的解决方案。但我想出了一点工作，完成这项工作。
<!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',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',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>
我粘贴了我的整个代码，所以你可以试试。这里有一个简短的说明：
当您开始拖动项目时，它会隐藏原始项，克隆它，然后将克隆附加到溢出区域之外的容器中。一旦删除，它将删除原始文件并将克隆移动到放置区域。伟大所以现在我们已经解决了溢出问题，但遇到其他一些。将克隆项放入放置区域时，它将消失。为了阻止这种情况发生，我使用这种方法：
$.ui.ddmanager.current.cancelHelperRemoval = true;
现在我们已停止帮助程序被删除，但它仍然在“div#tagFun_div_helper”，而原来的可拖动项已重新出现。
ui.helper.appendTo(this);
这将帮助者从“div#tagFun_div_helper”转移到我们的放置区域。
dropped = true;
