Packery +可拖动UI在拖动后排序

Question

如何在拖拽一个项目后创建一个有序列表？我使用.packery ()方法重新排序。但是移动的项目会跳回来。

    <h1>Packery - get item elements in order after drag</h1>
        <div class="grid">
          <div class="grid-item grid-item--width2"></div>
          <div class="grid-item grid-item--height2"></div>
          <div class="grid-item"></div>
          <div class="grid-item"></div>
 
        </div>
<script>
// external js: packery.pkgd.js, draggabilly.pkgd.js

var $grid = $('.grid').packery({
  itemSelector: '.grid-item',
  columnWidth: 100
});

// make all grid-items draggable
$grid.find('.grid-item').each( function( i, gridItem ) {
  var draggie = new Draggabilly( gridItem );
  // bind drag events to Packery
  $grid.packery( 'bindDraggabillyEvents', draggie );
});


// show item order after layout
function orderItems() {
  var itemElems = $grid.packery('getItemElements');
  $( itemElems ).each( function( i, itemElem ) {
    $(itemElem).text( i + 1 );
  });
}

$grid.on( 'layoutComplete', orderItems );
$grid.on( 'dragItemPositioned', orderItems );
$grid.on("dragItemPositioned", function (event, draggedItem) {
    $grid.packery();
  });
</script>

https://codepen.io/maxim-dmitruk/pen/NWxzqoe

Answer 1

我的决定是通过添加

    $grid.on("dragItemPositioned", function (event, draggedItem) {
    $grid.packery();
    $grid.packery("layoutItems", draggedItem); //this one
    });