jquery - jqueryドラッグ可能セットの包含

Question

親の80％の包含を設定したいドラッグ可能なdivがあります。どうすればこれを達成できますか？

$( ".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" });