Packery + Dragable UI sort after drag

Question

How to make an ordered list after dragging an item? I used the .packery () method to reorder. But the moved item jumps back

    <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

I decided this by adding

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