SO - 19803254

HTML

<div id="boxes_holder" class="initBox">
    <div draggable="true" class="boxes" style="text-align:center;">1</div>
    <div draggable="true" class="boxes" style="text-align:center;">2</div>
    <div draggable="true" class="boxes" style="text-align:center;">3</div>
    <div draggable="true" class="boxes" style="text-align:center;">4</div>
</div>


<div id="dragBoxTitle" class = "">Box</div>
<div id="dragBox" class = "initBox">
	
</div>

CSS

.initBox{
    width:260px;
	height:200px;
	border:1px solid #ccc;
	display: inline-block;
	float: right;
  	vertical-align:top;
  	background-color:#FBFBFB;
  	list-style-type: none;
}

JavaScript

$(document).ready(function () {
    $('#boxes_holder #dragBox').sortable({
        connectWith: '.initBox',
        

        //Whenever Dropped Item
        receive: function (event, ui) {
            $(this).find('div.boxes').sort(sortAlpha).appendTo(this);  
            if ($(this).children().length > 5) {
                if ($(this).attr('id') == 'dragBox') {
                    $(ui.sender).sortable('cancel');
                }
            }
        }
    });
    
    function sortAlpha(a,b){  
        return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;  
    }
    
});