我需要使用jQuery UI来限制可拖动对象的容纳区域,并附加一些限制.我需要防止可拖动元素与同一容器中的其他元素重叠.我需要允许在“moveInHere”区域移动,但不允许“butNereHere”区域移动.可能吗？
<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"
});
旧解决方案
以下应该工作.它有一个小故障,但是.一旦divs碰撞,你必须“重新格式化”你拖动的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"
});
