我需要使用 jQuery UI 来限制可拖动对象的包含区域,并进行一些附加限制。我需要防止可拖动元素与同一容器内的其他元素重叠。我需要允许在“moveInHere”区域移动,但不允许在“butNotHere”区域移动。可能吗?
<div id="moveInHere">
<div id="dragMe"> </div>
<div id="butNotHere"> </div>
</div>
<script type="text/javascript">
$("#dragMe").draggable({
containment: "#moveInHere"
});
</script>
最佳答案
编辑:新解决方案
我找到了一个名为 JQuery UI Draggable Collision 的插件。使用它,实现您想要的功能变得微不足道。请参阅以下 jsFiddle 示例:http://jsfiddle.net/q3x8w03y/1/ (这使用 JQuery UI Draggable Collision 版本 1.0.2,以及 JQuery 1.7.2 和 JQueryUI 1.1.18。)
这是代码:
$("#dragMe").draggable({
obstacle: "#butNotHere",
preventCollision: true,
containment: "#moveInHere"
});
旧解决方案
以下内容应该有效。但它有一个小故障。一旦 div 发生碰撞,您就必须“重新抓取”正在拖动的 div,这可能有点烦人。也许其他人会知道如何解决这个问题。你可以看我的jsFiddle例子here : http://jsfiddle.net/MrAdE/8/
var prevOffset, curOffset;
$("#dragMe").draggable({
drag: function(e,ui) {
prevOffset= curOffset;
curOffset= $.extend({},ui.offset);
return true;
}
});
$("#butNotHere").droppable({
greedy: true,
over: function(e,ui) {
ui.helper.offset(curOffset= prevOffset).trigger("mouseup");
},
tolerance: "touch"
});
关于jquery - 限制 jQuery 可拖动项目与同级元素重叠/碰撞,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11452185/