Support sorting strategy for grid

[Raphael-Bahuau]

Does your library work with a grid ?

I'm very interested on a truelly performant dnd lib to use with Svelte.
The most advanced (svelte-dnd-action) don't use CSS translate to optimise performance.
So for now I'm stuck with a React project using DnDKit that is really smooth and performant, but I wan't to move to Svelte someday.

Let me know.

[jalal246]

It does. It dynamically reads the element positions regardless of the parent syle; whether it is flex or grid. Example from the playground (https://github.com/dflex-js/dflex/blob/main/playgrounds/dflex-dnd-playground/src/App.tsx#L137-L142)

[Raphael-Bahuau]

Example : a grid of images, organised like the windows file explorer, and you just wan't to re-order images by dragging them.

Have you look dnd-kit examples ?
Or event SortableJs example, those are really classic use case and a grid dnd should be like that.

[jalal246]

If you are moving element-2 to occupy element-7, what is the expected behavior? Switching element positions or re-sorting the entire UI? Another question: if element-7 is the only affected element, should we transform the entire tree or only the targeted position?

My perspective on this is that you are focusing on targeting specific positions rather than sorting the entire UI.

[Raphael-Bahuau]

It should sort the entire UI !

By the way, if you inspect the HTML of the dnd-kit example, you will find out that it use the same concept as you : apply transform, then only update the DOM structure onDragEnd.

In that example of element-2 moving down in place of element-7, the algo should only update the transform of the element from 2 to 7.

[jalal246]

It should sort the entire UI !

why? I can't think of a use case where "sort the UI" instead of updating the targeted elements.

By the way, if you inspect the HTML of the dnd-kit example, you will find out that it use the same concept as you : apply transform, then only update the DOM structure onDragEnd.

No, it doesn't.

1- DFlex has an option to mutate or keep the transformation.
2- DFlex has reconciler. Even when you are mutating the DOM, only the targeted elements will be updated in the DOM, not the entire tree.
3- DFlex has scedhuler. Updating elements won't block your thread.
4- DFlex depends on physical interactions. You can see the effect of your action live instead of keeping the element in its position and brute force the transformation.
5- DFlex has rich events, instead of HTML drag and drop events.

[Raphael-Bahuau]

When I say "Sort the entire UI", I mean update the CSS property transition of every div that move, so the div 2 to 7 in the example.

No, it doesn't.

Yes it does... just inspect the HTML and you will see it. In the video, the div-1 alway stay at first position when I move it, and you can see transition CSS property updating.

Presets._.Sortable._.Grid.-.Basic.Setup.Storybook.-.Google.Chrome.2024-05-24.14-41-38.mp4

Your library seem's great, but incomplete if you don't implement Sorting on grid like so.