JSFiddle - React, Tailwind, and code Playground

by cuhuak

HTML

<div id="wrapper">
	<div id="origin" class="fbox">
    <ul id="sort1" class="list can-receive">
        <li><img src="http://placehold.it/140x100" id="one" title="one" class="draggable" /><a href="#">→</a></li>
      <li><img src="http://placehold.it/140x100" id="two" title="two" class="draggable" /></li>
      <li><img src="http://placehold.it/140x100" id="three" title="three" class="draggable" /></li>
       <li><img src="http://placehold.it/140x100" class="draggable" /></li>
      <li><img src="http://placehold.it/140x100"  class="draggable" /></li>
      
    </ul>
	</div>
	<div id="drop" class="fbox">
     <ul id="sort2" class="list">
       <li><img src="http://placehold.it/140x100" class="draggable" /></li>
     </ul>
	</div>
</div>

CSS

#origin
{
  background-color: green;
    float: left;
    width: 40%;
    margin-right: 15px;
}
#drop
{
  background-color: orange;
    float: left;
    width: 40%;
  height: 104px;
    padding: 5px;
}
.list{ min-height: 120px; margin: 0; padding: 0;} /* you need to set the size of the ul otherwise it may not detect the dropped item */
.list li{
display: block;
height: 100px;
    border: 2px solid aqua;
}

JavaScript

$( "#sort1, #sort2" ).sortable({
      helper:"clone", 
      opacity:0.5,
      cursor:"crosshair",
      connectWith: ".can-receive",
      receive: function( event, ui ){
        if($(ui.sender).attr('id')==='sort1'){
          $('#sort2').removeClass('can-receive');
        }
          else {
              $('#sort2').addClass('can-receive');
          }
      }
});

function moveToBox() {
}
$('a').on('click', function (e) {
   
    var element = $(this).parents('li').detach();
    $('#sort2').append(element);
});
$( "#sort1,#sort2" ).disableSelection();