jquery - jquery 可拖动集包含

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 内。这是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" });