Demo of Dragging elements containment to element in JQuery
Drag Me
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>