如何停止div移出邊界Jquery draggable（）;

Question

如何阻止div移出邊框div

這是我到目前爲止得到的代碼。

<script> 
$(document).ready(function() { 
$("#draggable").draggable({ grid: [50, 20] }); 
    }); 
    </script> 
    <div id="drag_border"> 
    <div id="draggable" style="width:500; height:800">Drag me</div> 
    </div> 

謝謝

Answer 1

您需要使用containment。例如。

$("#draggable").draggable({ 
    grid: [50, 20], 
    containment: 'parent' 
}); 

編輯：

這裏的an example。

請記住，您正在使用網格，因此除非您計算框的寬度和高度以匹配網格，否則您將無法到達邊緣。