jQuery ui-删除可拖动元素之间的空间

Question

Please find this fiddle . Here sorting of elements works fine when I drop element back to "Events" area. But the problem is when I drag an element from "Events" area, the space occupied by that element won't remove. I want to remove that space or sorting when element is dragged from "Events" area. The condition is I don't want to use sortable of jquery ui . I don't want sorting in "Drop" area.

As shown in jsfiddle that there is no sorting on "Drop" area but there is a sorting on "Events" area. But the sorting on "Events" works only when an element is dropped inside it.

For example, if I drag "Event 2" and drop it on "Drop" area, the space between "Event 1" and "Event 3" remains. I want to remove that space. so the order will be Event1, Event3 and when I drop "Event 2" back to "Events", the order will be Event1, Event2, Event3.

$("li.ui-draggable").draggable({
     revert: "true",
 });

 $("#eventlist").droppable({
     accept: ".ui-draggable",
     tolerance: 'touch',
     drop: function (event, ui) {
         // event sorting
         console.log(':::inside drop of eventlist:::');
         var $item = ui.draggable;
         $(this).append($item);
         $item.css({
             top: 0,
             left: 0
         });

         var seen = [];

         $(this).find('.ui-draggable').each(function (index, item) {
             seen.push($(item).attr('id'));
         });
         console.log(':::seen array:::', seen);
         seen.sort();
         for (var i = 0; i < seen.length; i++) {
             $(this).append($(this).find('#' + seen[i]));
         }
     }
 });

How do I remove the space in between the draggable elements or sort elements while dragging ?????

Answer 1

make your #timeline droppable and remove sorting something like this JSFiddle Additionally, you can implement "on hover"

$('#timeline').droppable({
          accept: ".ui-draggable",      
          tolerance: 'touch',
          drop:function(event, ui){
                // event sorting
                console.log(':::inside drop of eventlist:::');
                var $item=ui.draggable;
                $(this).append($item);
                $item.css({top:0,left:0});

                var seen=[]; 

                $(this).find('.ui-draggable').each(function(index,item)
                {
                    seen.push($(item).attr('id'));
                });
                console.log(':::seen array:::',seen);    
                //seen.sort();
                for(var i = 0 ; i < seen.length ; i++){                    
                    $(this).append($(this).find('#'+seen[i]));
                }
          }
      });

Answer 2

Just for a Hint , you have to change CSS by jquery in following event :-

$("li.ui-draggable").draggable({                              
    revert: "true",
    stop: function( event, ui ) {
     $(this).appendTo('ul');
    // Change in CSS code
    }
 });

This event is fired when the item is dropped in the below DIV.

Answer 3

Check this one if it is useful to you Fiddle

$("#origin").sortable({
    connectWith: "#drop"
});

$("#drop").sortable({
    connectWith: "#origin"
});