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建议的那样，你可以使用一个占其父项大小80％的内部div，然后将约束拖动到该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" });