jquery ui draggable限制拖动区域

  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限制拖动区域

评论(0)Web开发网
阅读(547)喜欢(0)JavaScript/Ajax开发技巧