More information on configuring committing changes to DOM

[ddenev]

I see it is possible to control how and if dflex commits drag changes to the DOM via the CommitInterface configuration.

Could you please elaborate a little bit more on how these 2 options work?

I assume enableAfterEndingDrag enables/disables committing on a general level - i.e. should the new positions be reflected in the DOM?

I don't understand:

• what is the purpose of enableForScrollOnly?
• how those 2 options work together (if they have effect on each other)?

thank you!

[jalal246]

Under the hood, DFlex doesn't commit any changes to the DOM. Instead, it utilizes CSS translate indefinitely. This means that even if the dragged element occupies a new position, the DOM order will remain the same and the DOM tree will remain untouched. This ensures optimal performance, as DFlex guarantees zero layout shifts and utilizes CSS within the animated frame.

Now, what happens in the case of a migration between two containers?

In short, DFlex will maintain the same behavior. Even if the dragged element is positioned within a different parent container, it will still be positioned using CSS translate.

The default option is to commit everything to the DOM, including the two scenarios explained above:

When dragged within the same container: enableAfterEndingDrag: true
When migrating: enableForScrollOnly: true - This also includes scrolling the element inside the same container.

You have the flexibility to make changes based on the state of your application. With each new DnD, you can pass different options or stick with the same ones.

You can check the interface by importing the option type:

import type { DFlexDnDOpts } from "@dflex/dnd";