haltu / muuri

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

Keeping Sort Order's in Sync with DB #478

Closed ibrychgo closed 3 years ago

ibrychgo commented 3 years ago

First, I'm loving Muuri. The performance is unreal. Thank you!

I'm currently stuck on something on our Kanban board.

When columns are rearranged via Drag & Drop, I am doing the following: 1) Updating the "order" node for each item in the database. 2) Updating the "data-order" attribute on each column.

When we detect a new item added to a column in the DB, we are removing that column from the boardGrid and re-adding it with the newest data.

But, of course, for the replacement column to end up in the right place after an .add (even though I am passing the index here) instead of the end, I need to sort the boardGrid on 'order' (which uses the 'data-order' attribute):

sortData: { order: function (item, element) { return parseFloat(element.getAttribute('data-order')); }, }

This seems to work beautifully...as long as our columns are still in their original order. Even with 50+ items in a column, Muuri is brisk.

However, if the columns have been rearranged, even though the data-order attribute for each column has been updated to their new positions on drag/drop, the sort operation reverts all columns back to their ORIGINAL location...it's as if the change to the "data-order" attribute isn't being recognized by Muuri.

Am I missing something or maybe doing this wrong?

Any help is greatly appreciated. Thanks!

ibrychgo commented 3 years ago

[UPDATE - OK, LIKE, THE MOST BASIC OF BASIC TYPOS ESCAPED ME FOR 4 HOURS]

.add(ing) while declaring the index works as expected so there's no need for me to call .sort for this particular operation.

That being said, I was planning on sorting on more than just the ID as features get added and I was planning on using data-attributes to do it, so the question still stands - is Muuri not detecting the changes I make to the data-order attributes of the elements when it sorts? [/UPDATE]

niklasramo commented 3 years ago

Nope, you have to explicitly call .sort() (or manually sort the grid._items and call grid.layout()) after you have changed any attributes in DOM that might affect the sort order.

ibrychgo commented 3 years ago

Gotcha. Thanks!

niklasramo commented 3 years ago

This issue seems resolved -> closing for now.