JavaScript jQuery UI - Drag and drop sorting and revert jquery drag drop file upload,jquery drag drop list,jquery

Please find this jsfiddle I've created drag n drop no sorting

The problem here is that when I put the box from drag-gable area to "drop here" area, the boxes won't be sorted out. For example If I put box2 on "drop here" area, there should not be space remain between box1 and box3. And when I put box2 back to drag-able are it should in between box1 and box3.

I've tried to sort out in drop event of draggable area.

The second problem is the box must revert back to the draggable area only if it dropped other than "drop here" area. But here it works partially. If I drag a box from "drop here" area and put outside it, it reverts back to "drop here" area. I want it to go back to drag-able area.

Here is my code:

$(function(){

  //$("#eventlist").sortable({connectWith: "#timeline"});
  //$("#timeline").sortable({connectWith: "#eventlist"});

  $(".ui-draggable").draggable({ 
      cursor: "move", cursorAt: { top: -5, left: -5 },
      //snap: " #eventlist", snapMode: "inner"
      revert: "true"      
  });

  $("#eventlist").droppable({
      accept: ".ui-draggable",      
      tolerance: 'fit',
      drop:function(event, ui){
        $("#eventlist").sortable()  ;
      }
  });

  $("#timeline").droppable({
      accept: ".ui-draggable",      
      tolerance: 'fit',      
      drop: function( event, ui ) {
        console.log(':::dropped on timeline:::');        
      },
      out: function( event, ui ) {
        $(".ui-draggable").draggable('option','revert','invalid');        
      }
  });
  });

How do I sort the boxes when it comes back to drag-able area ??? and how the box revert back to its original (the initial) position ???

Please find this solution: sorting at one side only

Still there is a problem. When I drop an element, I goes to the start of the drop area if it's empty. I am not able to drop it anywhere in the area.

$(document).ready(function () {
    $('#eventList, #timeLine').sortable({
        connectWith: '.initBox',        
        //Whenever Dropped Item
        receive: function (event, ui) {

       if ($(this).attr('id') != 'timeLine') {            
        $(this).find('div.boxes').sort(sortAlpha).appendTo(this);  
            if ($(this).children().length > 5) {
                if ($(this).attr('id') == 'timeLine') {
                    $(ui.sender).sortable('cancel');
                }
            }
        }
        }
    });

    function sortAlpha(a,b){  
        return a.id.toLowerCase() > b.id.toLowerCase() ? 1 : -1;  
    }

});

How do I make it to drop anywhere in drop area ?????