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