如何限制1格離開另一個格不超過一定距離？

Question

我有這個

<div class="holder"> 
    <div class="drag"> 

    </div> 
</div> 

我jQueryUI的

$(".drag").draggable(); 

所以現在我可以拖動.drag的div，我怎能代碼，限制牽引股利不超越30像素的距離遠持有？因此，如果drag div與持有者div相距30px，則拖動將不起作用，或者基本上，drag div在距持有者div達到最大30px後將停止「拖動」。由於

Answer 1

試試這個：

var distance; 
$(".drag").draggable({ 
    drag: function(event, ui){ 
     distance = // calculate distance between divs here 
     if(distance > 30) return false; 
    } 
}); 

參考the events page上jQueryui.com

參考THIS FIDDLE。在這裏，藍色div只能在父母的30px範圍內移動。

Answer 2

的jsfiddle =>http://jsfiddle.net/u9f465h0/4/

var holderPos = {}; 
holderPos.width = $('.holder').outerWidth(true); 
holderPos.height = $('.holder').outerHeight(true); 

$('.drag').draggable({ 
    start: function() { 
     $('.drag').draggable({revert:false}); 
    }, 
drag: function(event, ui) { 
     if(ui.position.left<-30) { 
      $('.drag').draggable({revert:true}); 
      return false; 
     } 
     else if(ui.position.top<-30) { 
      $('.drag').draggable({revert:true}); 
      return false; 
     } 
     else if(ui.position.top>(10+holderPos.height)) { 
      $('.drag').draggable({revert:true}); 
      return false; 
     }    
     else if(ui.position.left>(10+holderPos.width)) { 
      $('.drag').draggable({revert:true}); 
      return false; 
     }           
} 

}); 

對於上面的代碼，您可以更改需要恢復的速度：

$(".selector").draggable({ revertDuration: 200 }); 

對於保持拖動對象在格上面的代碼只能使用此代碼超越：

$(".drag").draggable ({ containment : ".holder" }); //for hold drag in div.holder 

Answer 3

我能想到的最簡單的方法是將可拖動的包裝在絕對路徑中伊利定位的元素（因此，它是出於正常的流動並不會影響你的佈局的其餘部分）爲大於.holder由n像素（您可以通過設置它的top，right，bottom，left屬性-n實現）並將其設置爲可拖動的containment。

$('.drag').draggable({ 
 
    containment: ".containment" 
 
});

.holder { 
 
    position: relative; 
 
    top: 100px; /*only for demo prpose*/ 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 0px auto; 
 
    background: red; 
 
} 
 
.containment { 
 
    position: absolute; 
 
    top: -30px; 
 
    right: -30px; 
 
    bottom: -30px; 
 
    left: -30px; 
 
    outline: 1px solid dodgerblue; /*only for demo prpose*/ 
 
} 
 
.drag { 
 
    width: 20px; 
 
    height: 40px; 
 
    background: blue; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 
<div class="holder"> 
 
    <div class="containment"> 
 
    <div class="drag"></div> 
 
    </div> 
 
</div>