Question

I have a draggable div to which I want to set containment 80% of parent. How can I achieve this ?

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

Answer 1

As Neil suggested, you can use an internal div that is 80% of its parents size, and then constraint dragging to within that div. Here is a quick-and-dirty example on jsfiddle.

For reference, the markup is:

<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>

The styles are:

.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; }

And the code is:

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