jQuery ui 可拖动元素在滚动 div 之外不可“拖动" [英] jQuery ui draggable elements not 'draggable' outside of scrolling div
问题描述
我在一个 div 中有许多元素(浮动 href 标签)，它们具有设置的高度/宽度，在 CSS 中滚动设置为 overflow: auto.
这是div的结构:
<div id="tf_div_tagsReturn"><!-- 所有可拖动元素都放在这里，父 div scolls --><div id="tf_div_tagsDrop"><div id="tf_dropBox"></div></div></div>
父 div 的 'tf_div_tagsReturn' 和 'tf_div_tagsDrop' 最终将彼此相邻浮动.
这是在使用类名tag_cell"创建所有可拖动"元素后运行的 jQuery:
$(function() {$(".tag_cell").draggable({回复: '无效',滚动:假，遏制:'#tagFun_div_main'});$("#tf_dropBox").droppable({接受:'.tag_cell'，悬停类:'tf_dropBox_hover'，activeClass: 'tf_dropBox_active',下降:功能(事件，用户界面){GLOBAL_ary_tf_tags.push(ui.draggable.html());tagFun_reload();}});});正如我上面所说的，可拖动元素在 div 'tf_div_tagsReturn' 内是可拖动的，但它们不会在视觉上拖动到该父 div 之外.值得注意的是，如果我拖动可拖动元素之一，并将鼠标移到可放置的 div 上，id 为 'tf_dropBox'，然后悬停类被触发，我就再也看不到可拖动元素了.
这是我第一次使用 jQuery，所以希望我只是遗漏了一些非常明显的东西.到目前为止，我一直在阅读文档和搜索论坛，但没有成功:(
更新:
非常感谢 Jabes88 提供的解决方案，使我能够实现我正在寻找的功能.这是我的 jQuery 最终的样子:
$(function() {$(".tag_cell").draggable({回复: '无效',滚动:假，遏制:'#tagFun_div_main'，帮手:'克隆'，开始:函数(){this.style.display="无";},停止:函数(){this.style.display="";}});$(".tf_dropBox").droppable({接受:'.tag_cell'，悬停类:'tf_dropBox_hover'，activeClass: 'tf_dropBox_active',下降:功能(事件，用户界面){GLOBAL_ary_tf_tags.push(ui.draggable.html());tagFun_reload();}});});您是否打算允许多个可拖动对象的实例?然后使用 helper 和 append 选项:
$(".tag_cell").draggable({帮手:'克隆'，appendTo: 'div#myHelperHolder'});然后在你的 css 中你可以将 div#myHelperHolder 的 zindex 设置为 999.如果没有，请尝试仅使用 zindex 选项:
$(".tag_cell").draggable({z索引: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"><头><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);函数 OnLoad(){变量下降 = 假；$(".tag_cell").draggable({添加类:假，回复: '无效',遏制:'#tagFun_div_main'，帮手:'克隆'，appendTo: '#tagFun_div_helper',开始:功能(事件，用户界面){下降 = 假；$(this).addClass("隐藏");},停止:功能(事件，用户界面){如果(下降==真){$(this).remove();} 别的 {$(this).removeClass("隐藏");}}});$("#tf_dropBox").droppable({接受:'.tag_cell'，悬停类:'tf_dropBox_hover'，activeClass: 'tf_dropBox_active',下降:功能(事件，用户界面){下降 = 真;$.ui.ddmanager.current.cancelHelperRemoval = true;ui.helper.appendTo(this);}});}<风格>div#tagFun_div_main { 显示:块；宽度:800px；高度:400px；保证金:自动；填充:10px；背景:#F00;}div#tf_div_tagsReturn { 显示:块；宽度:200px；高度:100%；向左飘浮;溢出:自动；背景:#000；}div#tf_div_tagsDrop { 显示:块；宽度:200px；高度:100%；浮动:右；背景:#0F0；}div#tf_dropBox { 显示:块；宽度:100%；高度:250px；背景:#F0F;}span.tag_cell { 显示:块；宽度:25px；高度:25px；边距:1px；向左飘浮;游标:指针；背景:#0FF;z-索引:99；}span.tag_cell.hide { 显示:无；}div#tf_dropBox.tf_dropBox_hover { 背景:#FFF ！重要；}div#tf_dropBox.tf_dropBox_active { 背景:#333;}</风格><身体><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 id="tf_div_tagsDrop"><div id="tf_dropBox"></div>
<div id="tagFun_div_helper"><!-- 这是临时使用辅助函数的地方 -->