javascript - jQuery UI - 拖放排序和恢复

Question

请找到我创建的这个 jsfiddle drag n drop no sorting

这里的问题是，当我把箱子从可拖动区域放到“拖放这里”区域时，箱子不会被整理出来。例如，如果我将 box2 放在“拖放此处”区域，则 box1 和 box3 之间不应该留有空间。当我将 box2 放回可拖动状态时，它是否应该位于 box1 和 box3 之间。

我尝试在可拖动区域的drop事件中进行整理。

第二个问题是，只有当框掉落到“拖放此处”区域以外的区域时，方框才必须恢复到可拖动区域。但在这里它部分起作用。如果我从“放在这里”区域拖出一个框并放在外面，它会恢复到“放在这里”区域。我希望它回到可拖动区域。

这是我的代码:

$(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');        
      }
  });
  });

回到可拖动区域时如何对框进行排序？？？以及盒子如何恢复到其原始(初始)位置？？？

Answer 1

请找到此解决方案:sorting at one side only

还是有问题。当我放下一个元素时，如果它是空的，我会转到放置区域的开头。我不能把它丢在该地区的任何地方。

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

});

我如何让它掉落到掉落区域的任何地方？？？？？