1st element to dragg
<div class='row'> <div class='col-md-6'> my-sortable1
<ul id="my-sortable1">
<li class="drg_box1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="drg_box1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="drg_box1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="drg_box1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
</ul>
</div><div class='col-md-6'> my-sortable2
<ul id="my-sortable2">
<li class="drg_box2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="drg_box2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="drg_box2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="drg_box2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
</ul>
</div></div><br><br>
<p class='drg_box'>1st element to dragg </p>
<br><br>
<button id=b1>Conect to List 1 </button> <button id=b2>Conect to List 2 </button><br>
<div id=d1 style="position: absolute;"></div>
<script>
$(document).ready(function() {
////////////////
$( ".drg_box" ).draggable({
scope: "#my-sortable1"
});
//////
$("#b1").click(function(){
$( ".drg_box" ).draggable( "option", "scope", "#my-sortable1" );
var scope = $( ".drg_box" ).draggable( "option", "scope" );
$('#d1').html("scope value is " + scope);
})
///////////
//////
$("#b2").click(function(){
$( ".drg_box" ).draggable( "option", "scope", "#my-sortable2" );
var scope = $( ".drg_box" ).draggable( "option", "scope" );
$('#d1').html("scope value is " + scope);
})
///////////
var scope = $( ".drg_box" ).draggable( "option", "scope" );
$('#d1').html("scope value is " + scope);
///////////
})
</script>