haltu / muuri

Infinite responsive, sortable, filterable and draggable layouts
https://muuri.dev
MIT License
10.77k stars 643 forks source link

dragSortPredicate does not seem to work properly #553

Open RAIbrahim360 opened 1 year ago

RAIbrahim360 commented 1 year ago

https://codepen.io/Ibishka/pen/YzJYLZV

https://user-images.githubusercontent.com/53712362/236541036-dbbb7e75-b005-4a0f-b6ce-a84da620e02c.mp4

RAIbrahim360 commented 1 year ago
let dragStartItems;

const grid = new Muuri(".grid", {
  dragEnabled: true,
  layout: {
    fillGaps: true
  },
  dragSortPredicate: (item) => {
    const result = Muuri.ItemDrag.defaultSortPredicate(item);

    if (result) {
      if (result.index === 6) {
        return false;
      }
    }

    return Muuri.ItemDrag.defaultSortPredicate(item);
  }
})
  .on("dragStart", () => {
    dragStartItems = grid.getItems();
  })
  .on("dragReleaseEnd", (item) => {
     // You must use dragReleaseEnd instead of dragEnd, to sort correctly
    // You must sort, because sometimes return incorrect order
    const sortedGridItems = grid.getItems().sort((a, b) => {
      const aPos = a.getPosition();
      const bPos = b.getPosition();

      return aPos.top - bPos.top || aPos.left - bPos.left;
    });
    const itemIndex = sortedGridItems.indexOf(item);
    const prevItem = dragStartItems[itemIndex].getElement();

    if (Number(prevItem.dataset.index) !== 6) {
      return;
    }

    const itemPrevIndex = dragStartItems.indexOf(item);
    grid.move(item, itemPrevIndex, { layout: "instant" });
  });

for those, who want solution. But this should fixed from core

RAIbrahim360 commented 4 months ago

@niklasramo Any progress on that?