如何按项目的数据属性自动对 JQuery 可拖动框进行排序

Question

我正在尝试为我的可拖动项目实现一个行为。

此处描述了行为：

我的盒子包含多个在页面加载时排序的可拖动项目
我可以在拖放区域中从该框中拖动项目
但是如果我将它拖回方框，它应该会根据其数据属性重新放置在原来的位置

我不知道如何做到这一点。我看到 sortable 可以做到这一点，但我不知道如何将它与 draggable 结合起来。

谢谢

HTML

<div class="multiple-drag-area position-sticky sticky-top">
    <div class="box" data-position="1">
         Item 1
    </div>   
    <div class="box" data-position="2">
         Item 2
    </div>
    <div class="box" data-position="3">
         Item 3
    </div>    
</div>


<div class="drag-area">
   Drop 1
</div>
<div class="drag-area>
   Drop 2
</div>
<div class="drag-area>
   Drop 3
</div>

JS

$( ".box" ).draggable({
    scope: 'demoBox',
    revert: true,
    cursorAt: { top: 40, left: 40 },
    revertDuration: 100,
    start: function( event, ui ) {
           //Reset
           $( ".box" ).draggable( "option", "revert", true );
              console.log('-');
           }
    });

    $( ".multiple-drag-area" ).droppable({
        scope: 'demoBox',
        drop: function( event, ui ) {
            var area = $(this).find(".area").html();
            var box = $(ui.draggable).html()     
            $( ".box" ).draggable( "option", "revert", false );
                
            //Display action in text
            console.log("[Action] <b>" + box + "</b>" + " dropped on " + "<b>" + area + "</b>");
                
            //Realign item
            $(ui.draggable).detach().css({top: 0,left: 0, marginRight:4}).appendTo(this);  
        },
    })
            
    $( ".drag-area" ).droppable({
        scope: 'demoBox',
        drop: function( event, ui ) {
            var area = $(this).find(".area").html();
            var box = $(ui.draggable).html()     
            $( ".box" ).draggable( "option", "revert", false );
                
            //Display action in text
                console.log("[Action] <b>" + box + "</b>" + " dropped on " + "<b>" + area + "</b>");
                
            //Realign item
            $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
        },
        accept: function(draggable) {
             return $(this).find("*").length-1 == 0 && (!$(this).hasClass("blocked-seat"));
        }
    })

Answer 1

类似的东西应该可以工作：

$( ".box" ).draggable({
  revert: true,
});

$( ".drag-area" ).droppable({
  drop: function( event, ui ) {
    $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
  }
});

$( ".multiple-drag-area" ).droppable({
  drop: function( event, ui ) {

    let box = $(ui.draggable);

    // check if Element gets reinserted
    // we can check that by confirming the the box parent has the 'drag-area' class
    if($(box).parent().hasClass("drag-area")){

      $(box).detach().css({top: 0,left: 0}).appendTo(this);

      // sort the boxes based on 'data-position'
      $(this).find('.box').sort(function( a, b ) {
        return a.dataset.position - b.dataset.position;
      }).appendTo(this);

    }
  }
});

如何按项目的数据属性自动对 JQuery 可拖动框进行排序

How to sort automatically a JQuery draggable box by item's data-attribute

javascript

jquery

drag-and-drop

jquery-ui-draggable