如何按项目的数据属性对 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);

    }
  }
});