Javascript jQuery UI-拖放排序和还原

请找到我创建的这个JSFIDLE

这里的问题是，当我将框从“拖动山墙”区域放置到“放置在此处”区域时，框不会被排序。例如，如果我将box2放在“放在此处”区域，则box1和box3之间不应留有空间。当我把box2放回drag-able时，它应该在box1和box3之间

我试着在可拖动区域的

drop

事件中进行排序

第二个问题是，只有在“drop here”（放在此处）区域以外的区域中，长方体才能恢复到可拖动区域。但在这里它部分起作用。如果我把一个盒子从“放在这里”区域拖到外面，它会恢复到“放在这里”区域。我想让它回到可拖动的区域

这是我的密码：

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

});

我如何使它落在落物区的任何地方？？？？？

检查此项

JS

$（文档）.ready（函数（）{
$（函数（）{
$（“.box”）.draggable（{revert:true}）；
$（“#事件列表，#时间线”）。可拖放({
接受：“.box”，
activeClass：“ui状态悬停”，
hoverClass：“ui状态处于活动状态”，
drop：函数（事件、用户界面）{
$item=ui.draggable；$item.css（{top:0，left:0}）；
$（此项）。附加（$项）；
SEED=[]；
$（this）.find（'.box'）。每个（函数（索引，项）
{
seen.push（$（item.attr（'id'））；
})
seen.sort（）；
对于（var i=0；i

我刚才也做了类似的事情。您需要使用

sortable

而不是

draggable

。看看这把小提琴吧，它并不完全是你的情况，但它涉及到一个可排序列表，它被拖到其他的放置区域，实际上这些区域只是它所连接的其他可排序列表？？？现在它还在工作。不，一点也不。1） 您仍在使用

draggable

。2） 您没有使用可排序的

。3） 您没有使用我尝试使用的

sortable

和

connectWith

的

connectWith

。我的问题是没有两个列表。此处放置区域为

div

。确定。如果你想让放置区域保持排序，我想你只需要把它做成一个列表，而不是一个div。在一边排序是有效的，但是当我在放置区域放置一个框时，它会进入一个区域的开始。我希望它是用户实际丢弃它的地方。不应将其放置在放置区域的开头。@akbar ali您有解决方案吗？？？-@akbar Alibox应放置在灰色区域的任何位置。不在包装里。我希望你能找到一些解决办法。-@akbar ali

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



}
});
});

});