DFlex A JavaScript Project to Manipulate DOM Elements

Hello everyone! I’ve been working on a project called DFlex (https://github.com/jalal246/dflex) that contains multiple packages all written in Pure JavaScript to manipulate DOM elements in a completely new way depends on creating a DOM store.

The ultimate result is moving every element from destination to target with CSS animation. This means all possible operations should be done in 60fps.

It is also extendable. In most existing solutions the more elements you are trying to manipulate the more lagging you get. Here, no matter how many elements you are dealing with it’s always going to interpret each movement to CSS transform without asking the browser to get the node for each request.

I have examples for React and Vue with some explanations inside each package.

It’s not perfect and in the development process but I think it’s a real alternative to native-like API focused on performance and easy implementation. Because it’s just a pure js, every fix should enhance all framework implementations.

It’s Decoupled with separate packages to prevent a bloated bundle. Work with mouse event, so nothing new to learn. And most importantly it’s just a utility. You can use what you want.

Finally, it doesn’t sort, move, or whatsoever. Each DOM Node’s position is stored separately. Each movement calculates the current position and triggers any effect that movement caused. So It may cause “dragging only with zero effect” Or “Switch with another element”. It has also container/children architecture. So you can drag a child, or parent…etc

I hope you like it, and I am looking for contributors who like to get involved in open source. So, if you are interested, open an issue, apply for a pull request. And remember, you can always leave a star.

Thank you!