限制jQuery可拖動項目重疊/與同級元素碰撞

我需要使用jQuery UI來限制可拖動對象的包含區域，並帶有一些額外的限制。我需要阻止可拖動元素與同一容器內的其他元素重疊。我需要在「moveInHere」區域允許移動，但不允許「butNotHere」區域移動。可能嗎？限制jQuery可拖動項目重疊/與同級元素碰撞

<div id="moveInHere"> 

    <div id="dragMe"> </div> 

    <div id="butNotHere"> </div> 

</div> 


<script type="text/javascript"> 

    $("#dragMe").draggable({ 
     containment: "#moveInHere" 
    }); 

</script>

來源

2012-07-12 the.ufon

編輯：新的解決方案

我發現了一個插件這叫做JQuery UI Draggable Collision。使用這個，實現你想要的功能變得微不足道。請參見下面的jsfiddle例如：http://jsfiddle.net/q3x8w03y/1/（這將使用1.0.2版本的JQuery UI可拖動的碰撞，使用jQuery 1.7.2和jQueryUI的1.1.18一起。）

下面是代碼：

$("#dragMe").draggable({ 
    obstacle: "#butNotHere", 
    preventCollision: true, 
    containment: "#moveInHere" 
});

老辦法

以下應該工作。但它有一個小故障。一旦div碰撞，你必須「regrab」你拖動的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" 
});

來源

2012-07-12 14:01:49 ihake

+1巧妙的使用'droppable'的'over'事件觸發'mouseup'。 – 2012-07-12 14:08:42

你知道你的新解決方案是否與JQuery 1.10兼容嗎？我收到錯誤。 – 2013-06-26 16:39:04

這jsfiddle不再工作。答案應該更新版本的細節等 – Kukeltje 2015-12-17 15:40:43

這讓我頗爲費解。基本上我在你想要避免的元素上創建了droppable，然後在拖動結束時設置一個布爾值。然後，我在一個未記錄的恢復函數覆蓋中使用它來取消刪除。它只能如果#dragMe完全超過#butNotHere：

$(document).ready(function(){ 
    var shouldCancel = false; 
    $('#dragMe').draggable({ 
     containment: '#moveInHere', 
     revert: function(){ 
      if (shouldCancel) { 
       shouldCancel = false; 
       return true; 
      } else { 
       return false; 
      } 
     } 
    }); 
    $('#butNotHere').droppable({ 
     over: function(){ 
      shouldCancel = true; 
     }, 
     out: function(){ 
      shouldCancel = false; 
     } 
    }); 
});

退房的工作演示，並隨時與它玩：http://jsfiddle.net/H59Nb/31/

來源

2012-07-12 13:48:44 Milimetric

限制jQuery可拖動項目重疊/與同級元素碰撞

回答

相關問題