prashantcs053
7/20/2017 - 5:16 AM

jquery drag and drop and sortable http://jsfiddle.net/prashantcs053/vjqucjzg/ http://jsfiddle.net/ULmrD/4/

$( "#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>5){
          $(ui.sender).sortable('cancel');
        }
      }
});

$( "#sort1,#sort2" ).disableSelection();
<div id="wrapper">
	<div id="origin" class="fbox">
		<img src="http://placehold.it/140x100" id="one" title="one" class="draggable" />
		<img src="http://placehold.it/150x100" id="two" title="two" class="draggable" />
		<img src="http://placehold.it/160x100" id="three" title="three" />
	</div>
  <p>test</p>
	<div id="drop" class="fbox">
   
	</div>
</div>
#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;
}