jQuery UI-拖放排序和还原

jQuery UI - Drag and drop sorting and revert

本文关键字：还原 排序 拖放 UI- jQuery      更新时间：2023-09-26

请找到我创建的这个jsfiddle拖放无排序

这里的问题是，当我把盒子从拖动山墙区域放到"放在这里"区域时，盒子不会被分类。例如，如果我把box2放在"drop here"区域，box1和box3之间就不应该有空间了。当我把箱子2放回可拖动的位置时，它应该在箱子1和箱子3之间。

我试着在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');        
      }
  });
  });

当它返回到可拖动区域时，我如何对框进行排序？？？盒子是如何恢复到原来的（初始）位置的？？？

请找到这个解决方案：只在一侧排序

仍然存在一个问题。当我放下一个元素时，如果它是空的，我会转到放下区域的开头。我不能把它扔到这个地区的任何地方。

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

我该如何在投递区的任何地方投递？？？？？

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

}
});
});
});
相关文章：