Set*_*eth 35 jquery user-interface scroll drag-and-drop
我在div中有很多元素(浮动href标签),设置高度/宽度,overflow: auto在CSS中设置滚动.
这是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>
父div,'tf_div_tagsReturn'和'tf_div_tagsDrop'最终会相互浮动.
这是在使用类名'tag_cell'创建所有'draggable'元素之后运行的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会被触发,我再也看不到可拖动的元素了.
这是我第一次使用jQuery,所以希望我只是缺少一些非常明显的东西.我一直在阅读文档和搜索论坛到目前为止没有占上风:(
更新:
非常感谢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();
}
});
});
Jus*_*ull 42
您是否允许使用可拖动对象的多个实例？然后使用帮助器和追加选项:
$(".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',
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;
这将告诉我们的stop函数从组中删除原始项而不是删除".hide"类.希望有所帮助!
cap*_*ula 20
在我的情况下,这解决了它,并完美地工作!
更新
$(".amigo").draggable({
revert: "invalid" ,
helper: function(){
$copy = $(this).clone();
return $copy;},
appendTo: 'body',
scroll: false
});
| 归档时间： |
|
| 查看次数： |
42430 次 |
| 最近记录： |