Does DFlex work with pointer events?

[ddenev]

I've read a lot about mouse vs. touch vs. pointer events and the contemporary consensus is that pointer events are the way to go (e.g. https://javascript.info/pointer-events).

I see the DFlex docs mention mouse events primarily but can it work with pointer events as well? Or is it mouse/touch/pointer-event-agnostic and we should take care about the event management and DFlex only takes care about moving the dragged elements?

Thank you!

[jalal246]

Hi @ddenev. This is such a good question. Actually, DFlex feeds on (X/Y) coordination regardless of its source. So characterize it as event-agnostic is a fair characterization. The idea behind it's design is that DFlex will handle the event feed but how it's going to be triggered and when it's up to the application itself which also gives you the freedom to choose the right framework for you instead of doing React/Vue/Soild.. etc plugins.

Because there's a store DFlex will transform/reconcile elements according to the dragged movement. So there's no need for extra configuration about how to handle the list of elements to interact with draggable elements.

[ddenev]

@jalal246, thank you very much for the quick reply!

DFlex looks very interesting to me since I have been looking for a good framework to use for my own D&D implementation in my app. So far I have built my D&D on top of Interact.js (https://interactjs.io/) but it's EOL.

Several more questions:

1. the term "reconciliation" is used quite a lot in the DFlex context. I guess it could be related to React but I come from a Vue background. When you say "reconcile" do you actually describe the rendering of the model to the actual DOM (in Vue it's just "render" the virtual DOM)?
2. if so then how would the DFlex's rendering work with the Vue's own rendering? I mean, I render a list in Vue based on a model (e.g. an array) so every time the model changes, Vue automatically (i.e. reactivity) re-renders the list to reflect the updated model. Wouldn't DFlex's own rendering conflict with Vue one or how do they work together? I still need the model to be updated b/c there are some side effects (e.g. backend calls) that depend on the model as well so it definitely needs to be aware of the update.

[jalal246]

When you change the element position using any current drag-and-drop library, you recreate the entire DOM tree according to the new order. This happens with each new position. What DFlex actually does are two things:

1. It offers transformation only. If your app doesn't need to reposition the elements, DFlex can apply CSS transformations to the elements without even changing the DOM.

2. When committing to the DOM is enabled (it's enabled by default), DFlex will check the DOM tree and only update the affected elements. So let's say you have a list with 10 elements and you switch positions between the last two. DFlex will check the element. If the position is in place, it will leave the element as it is. If not, then it will update the element's position. In this case, the 8 elements will be left untouched, and only the last two will be updated in the DOM.

This mechanism has nothing to do with what your framework offers.

Let's consider if you are using Vue/React DnD. Neither Vue nor React are designed for drag and drop. So what actually happens is the DOM is being updated directly no matter which framework you are using.

This is where the DFlex role comes in as a layer between your application and the browser. DFlex will update the DOM targeting the new positions, and you can obtain the new tree as a serialized output when needed.

How to know there's a change? You can do that in multiple ways.

There's a special events where you can listen to them at an application level. So you can know what element has been mutated and what's the output array you have.

You can request the new update from DFlex store.

And you can manage that from the elements themselves since you control the trigger event.

[ddenev]

Thanks! Since I would like to avoid the duplicate DOM update - i.e. once by dflex and another time by Vue, I guess I just need to listen to the dflex events and just stop dflex from committing the updated state to the DOM. Do I understand this correctly?

[jalal246]

No update duplication occurs here because Vue doesn't handle the drag-and-drop updates. The DOM is only updated by DFlex when a drag-and-drop action occurs.

Initializing and manipulating the DOM remains business as usual for Vue. DFlex steps in only during drag-and-drop operations. Think of it like adding CSS. There's no conflict between updating CSS and Vue's regular operations.

You won't need to take any extra steps to activate DFlex in your Vue application.

Give it a try, and if you have any feedback, I'm more than happy to address it.

[ddenev]

Aha, so if I understand correctly - everything that happens from "pointerdown" on and during "pointermove" is on dflex, and anything that happens after "pointerup" is on Vue/React/etc., correct?

[jalal246]

You're absolutely right.

DFlex won't disrupt your framework workflow. Even the event generation will originate from Vue and be seamlessly passed through to DFlex.

[ddenev]

Perfect! Thank you, @jalal246! Will definitely try dflex out!

Have a great day!

[jalal246]

You too. Thank you!