jQuery的ui可拖动的元素不是“可拖动”的滚动div之外
我有许多元素（浮动HREF标签）在具有设置高度/宽度的div，滚动设置为overflow: auto在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'创build后运行的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之外可视地拖动。 值得注意的是，如果我拖动其中一个可拖动的元素，并将鼠标移动到可放置的div上，id为“tf_dropBox”，则hoverclass被触发，我不能再看到可拖动的元素。
这是我第一次使用jQuery，所以希望我只是错过了一些超级明显的东西。 我一直在阅读文档和search论坛迄今没有盛行:(
更新：
非常感谢Jabes88提供的解决scheme，使我能够实现我正在寻找的function。 这是我的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(); } }); });
你打算让可拖动对象允许多个实例吗？ 然后使用助手和附加选项：
$(".tag_cell").draggable({ helper: 'clone', appendTo: 'div#myHelperHolder' });
然后在你的css中，你可以设置div＃myHelperHolder的zindex为999.如果不是，那么试着使用zindex选项：
$(".tag_cell").draggable({ zIndex: 999 });
我还会考虑设置addClasses来阻止插件添加所有那些浪费处理器速度的恼人的类。
更新：我有一个新的解决scheme
好了之后玩了一下，我想出了这个：滚动选项不会阻止孩子被隐藏溢出。 我读过一些其他的post，我无法find一个单一的解决scheme。 但是我想出了一点点工作来完成工作。
<!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>
我粘贴我的整个代码，所以你可以试试看。 这里是一个简单的描述：当你开始拖动一个项目时，它隐藏了原始的，克隆它，然后将克隆附加到溢出区域外面的容器。 一旦丢弃，它将删除原始文件并将克隆移入放置区域。 太好了，现在我们已经解决了溢出问题，但遇到了其他问题。 当您将复制品放入放置区域时，它将消失。 为了防止这种情况发生，我使用了这个方法：
$.ui.ddmanager.current.cancelHelperRemoval = true;
现在，我们已经停止帮助器被删除，但仍然在“div＃tagFun_div_helper”，而原来的可拖动项目已经出现。
ui.helper.appendTo(this);
这将把帮助器从“div＃tagFun_div_helper”转移到我们的放置区。
dropped = true;
这将告诉我们的停止function，删除组中的原始项目，而不是删除“.hide”类。 希望有所帮助！
在我的情况下，这解决了我的工作完美！
更新
$(".amigo").draggable({ revert: "invalid" , helper: function(){ $copy = $(this).clone(); return $copy;}, appendTo: 'body', scroll: false });
