Demo of Dragging elements scope toption in JQuery

my-sortable1

Item 1
Item 2
Item 3
Item 4

my-sortable2

Item 1
Item 2
Item 3
Item 4

1st element to dragg

HTML

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

jquery

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