jquery ui draggable限制拖动区域
jquery ui draggable如何限制被拖动对象的位置区域，不允许在指定区域内容放置被拖动的对象，如果在禁止区域内容放置对象则还原被拖动对象位置，效果如下。
jquery ui draggable限制拖动区域源代码如下
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery ui draggable限制拖动区域</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style>
#draggable {width: 250px;height: 50px;background: #ccc;}
.NotAllowDrop {position: absolute;left: 350px;top: 0;width: 125px;height: 125px;background: #999;color: #fff;padding: 10px;}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div class="NotAllowDrop">不允许拖放到此内容块上</div>
<div class="NotAllowDrop" style="top:200px;left:150px">不允许拖放到此内容块上</div>
<div id="draggable">Drag me</div>
<script>
function UIHit(ui, NotAllowRange) {//碰撞测试
if (!NotAllowRange || NotAllowRange.length == 0) return true;
var p1 = getRange(ui), p2, hit;
for (var i = 0; i < NotAllowRange.length; i++) {
p2 = NotAllowRange[i];
//顶点在对方区域判断
hit = ((p1.left >= p2.left && p1.left <= p2.right && p1.top >= p2.top && p1.top <= p2.bottom)) || //左上角
((p1.right >= p2.left && p1.right <= p2.right && p1.top >= p2.top && p1.top <= p2.bottom)) || //右上角
((p1.left >= p2.left && p1.left <= p2.right && p1.bottom >= p2.top && p1.bottom <= p2.bottom)) || //左下角
((p1.right >= p2.left && p1.right <= p2.right && p1.bottom >= p2.top && p1.bottom <= p2.bottom)) //右下角
if (!hit) {//十字交叉判断
hit = (p1.left < p2.left && p1.right > p2.right && p1.top > p2.top && p1.bottom < p2.bottom) || //o1水平横穿o2
(p1.left > p2.left && p1.right < p2.right && p1.top < p2.top && p1.bottom > p2.bottom)//o1垂直横穿o2
}
if (hit) return true;
}
return false;
}
function getRange(ui) {//获取对象位置区域
var p = { left: ui.position().left, top: ui.position().top };
p.bottom = p.top + ui.outerHeight();
p.right = p.left + ui.outerWidth();
return p;
}
$("#draggable").draggable({
start: function (e, ui) {
$(this).data('oldPosition', ui.position);//保存原始位置，以便在不允许拖放的地方松开鼠标时还原位置
}/*, drag: function (e, ui) {//拖动过程中的位置判断，是否在禁止块区域内容
document.body.style.cursor = UIHit(ui.helper, NotAllowRange) ? 'not-allowed' : 'auto';
}, stop: function (e, ui) {//拖动结束，判断是否在禁止区域内，在则还原位置
if (UIHit(ui.helper, NotAllowRange)) {
var op = ui.helper.data('oldPosition');
ui.helper.animate({ left: op.left, top: op.top }, 300);
}
document.body.style.cursor = 'auto';
}*/
});
var NotAllowRange;//保存不允许放置的区域位置信息，给draggable的drag，stop事件判断区域用
//jqueryui droppable的over，out，drop事件需要鼠标移动到对象上面才会触发，实际移动块边界已经进入禁止区域不会触发，需要给draggable添加drag事件进行边界检测
//如果不在意移动块边界可以使用droppable的drop，over，out事件（此时可以取消droppable初始化后的map代码，不需要禁止区域的位置信息）
//否则取消上面的draggable的drag，stop事件的注释，取消droppable的初始化（注意map后的语句不要注释）
NotAllowRange = $("div.NotAllowDrop").droppable({
drop: function (e, ui) {//在禁止块上放置被拖动块，还原位置
var op = ui.draggable.data('oldPosition');
ui.draggable.animate({ left: op.left, top: op.top }, 300);
}
//下面2个事件需要鼠标移动到对象上面才会触发，实际移动块边界已经进入不会触发，需要添加draggable的drag事件进行边界检测
, over: function () { document.body.style.cursor = 'not-allowed'; }
, out: function () { document.body.style.cursor = 'auto' }
}).map(function () {//获取不允许放置区域位置
return getRange($(this))
}).get();
</script>
</body>
</html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：jquery ui draggable限制拖动区域