Demo of Dragging elements containment to element in JQuery

Contentment to Box 1 Contentment to Box 2




By clicking the buttons you can set the containment to different boxes. Drag the element after clicking the buttons.

HTML

<div class=drg_box1 id=box1>Box 1</div>

</div><div class='col-md-6'>
<div class=drg_box2 id=box2>Box 2</div>

</div></div><br><br>
<div class=drg_box id=drg>Drag Me</div>

<br><br>
<button  id=b1>Contentment to Box 1 </button> <button  id=b2>Contentment to Box 2</button><br>
<div id=d1 style="position: absolute;"></div>

jquery

<script>
$(document).ready(function() {
////////////////
$( ".drg_box" ).draggable({
});
//////

//////
$("#b1").click(function(){
$( ".drg_box" ).draggable( "option", "containment", "#box1" );
var containment = $( ".drg_box" ).draggable( "option", "containment" );
$('#d1').html("containment value is " + containment);
})
///////////

//////
$("#b2").click(function(){
$( ".drg_box" ).draggable( "option", "containment", "#box2" );
var containment = $( ".drg_box" ).draggable( "option", "containment" );
$('#d1').html("containment value is " + containment);
})

///////////
})
</script>