Demo of Dragging elements option connectToSortable to sortable into sortable list

my-sortable1
  • Item 1
  • Item 2
  • Item 3
  • Item 4
my-sortable2
  • Item 1
  • Item 2
  • Item 3
  • Item 4


1st element to dragg

2nd element to dragg








There are two sortable list and two draggable elements. By default both draggable elements can be dropped to 1st list and became part of it. You can change this by clicking the buttons.

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>
<p class='drg_box'>2nd  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({
cancel: "select",
connectToSortable: "#my-sortable1",
});
//////
$( function() {
    $( "#my-sortable1" ).sortable();
    $( "#my-sortable1" ).disableSelection();
$( "#my-sortable2" ).sortable();
    $( "#my-sortable2" ).disableSelection();

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

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

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