jquery draggable set containment

Question

我有一個可拖動的div，我想要設置80％的父項。我怎樣才能做到這一點？

$(".content-columns-sep").draggable({ 
      axis: "x", 
      containment: "parent", 
      cursor: "crosshair", 
      grid: [10, 0], 
      drag: function(event, ui) { 
       .. 
      } 
     }); 

Answer 1

Neil建議您可以使用一個內部div，它是其父母大小的80％，然後約束拖動到該div內。這是一個快速和骯髒的example on jsfiddle。

作爲參考，標記是：

<div style="background-color: grey" class="draggable ui-widget-content"> 
    <div class="internal-area"> 
     <p style="background-color: red" id="draggable5" class="ui-widget-header"> 
     I'm contained within a percentage of my parent 
     </p> 
    </div> 
</div> 

的樣式是：

.draggable { width: 300px; height: 300px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } 
.internal-area { width: 80%; height: 80%; background-color: white; margin-left: 30px; margin-top: 30px;} 
#draggable, #draggable2 { margin-bottom:20px; } 
#draggable { cursor: n-resize; } 
#draggable5 { cursor: e-resize; width: 70px;} 
#containment-wrapper { width: 90%; height:150px; border:2px solid #ccc; padding: 10px; } 

和代碼是：

$("#draggable5").draggable({ containment: "parent" });