jQuery UI - 拖放排序和还原

Question

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

这里的问题是当我把盒子从拖拽区域放到“放在这里”区域时，盒子不会被整理出来。例如，如果我将 box2 放在“drop here”区域，则 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;  
    }

});

如何让它掉落到放置区域的任何地方?????

Answer 2

检查这个http://jsfiddle.net/kB8Lj/57/

JS

$(document).ready(function () {


$(function() {

$( ".boxes" ).draggable({ revert: true });
$( "#eventList, #timeLine" ).droppable({
accept: ".boxes",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {

$item=ui.draggable;$item.css({top:0,left:0});
$(this).append($item);

seen=[]; 

$(this).find('.boxes').each(function(index,item)
{
seen.push($(item).attr('id'));
})

seen.sort();


for(var i = 0 ; i < seen.length ; i++)    
$(this).append($(this).find('#'+seen[i]));



}
});
});

});