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]));



}
});
});

});

jQuery UI - 拖放排序和还原

2 个答案: