JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<div id="wrapper">
	<div id="origin" class="fbox">
    <ul id="sort1" class="list">
      <li><img src="http://placehold.it/140x100" id="one" title="one" class="draggable" /></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>
      <li><img src="http://placehold.it/140x100" class="draggable" /></li>
    </ul>
	</div>
  <p>test</p>
	<div id="drop" class="fbox">
     <ul id="sort2" class="list">
       
     </ul>
	</div>
</div>

CSS

#origin
{
  background-color: green;
}
#drop
{
  background-color: red;
  min-height: 120px;
}
.list{ min-height: 120px;} /* you need to set the size of the ul otherwise it may not detect the dropped item */
.list li{
display: inline-block;
list-style-type: none;
padding-right: 20px;
}

JavaScript

$( "#sort1, #sort2" ).sortable({
      helper:"clone", 
      opacity:0.5,
      cursor:"crosshair",
      connectWith: ".list",
      receive: function( event, ui ){
        if($(ui.sender).attr('id')==='sort1' 
           && $('#sort2').children('li').length>3){
          $(ui.sender).sortable('cancel');
        }
      }
});

$( "#sort1,#sort2" ).disableSelection();