DFlex – JavaScript framework for drag and drop apps

https://github.com/dflex-js/dflex

by winiwiwni • 4 years ago

96 59 4 years ago

github.com

iamgopal• 4 years ago

What are the use cases ?

jimmy202026• 4 years ago

Interactive web apps.

yamtaddle3• 4 years ago

Product managers are absolutely ga-ga for drag & drop, no matter how much you tell them it'll at least double the defect rate on the site and slow down all future user-facing feature development. It's that valuable to them, to the tune of effectively hundreds of "story points" over the life of a Web project.

So the use case is adding drag & drop interaction to sites, which is evidently extremely desirable.

jimmy202026• 4 years ago

I should add this comment as a description in the main readme :)

potamic• 4 years ago

It is by far the only Drag and Drop library on the internet that manipulates the DOM instead of reconstructing it

I'm not sure this is the only library doing this. It's in fact a popular approach for drag and drop on the browser. I believe dndkit also does this.

jimmy202026• 4 years ago

DFlex has an infinite transformation mechanism even between containers. So you can transform indefinitely and if you want you can enable committing to DOM which will trigger a custom reconciler built specifically for transformation. It's also not just for React, you can hook it with your JS framework.

Etheryte• 4 years ago

Yeah that statement is simply not true. Manipulating the DOM was how all of this was done already in the before jQuery days, not to mention many, many libraries since.

TimMeade• 4 years ago

Demos are here: https://www.dflex.dev/demo/lists/symmetric/

This looks worth checking out. Appears to work well on desktops and mobile.

jimmy202026• 4 years ago

Thanks for sharing the link. Appreciate your feedback. I'd like to point out that the site is not fully updated. The last release is not included in the demo yet but I'm working on it.

savolai• 4 years ago

Hi. Happy to see this. On iOS the first demo drag seems to trigger text selection too though, so perhaps not quite ready for production.

jimmy202026• 4 years ago

Hi HN, DFlex author here. I built DFlex because I couldn't find a comprehensive solution for interactive apps. All existing solutions depend heavily on HTML5 drag and drop to achieve interactivity despite the fact that the standard implementation is not designed to turn the apps into an interactive ones. So I started from scratch, built the transformation mechanism, and implement a custom reconciler built specifically to deal with DOM transformation. It also has a concurrent registration to prevent any blocking event and reduce initial loading. I also tried to take care of browser painting and scripting time. It's still in development mode but I'm glad it's shared here. Happy to take any questions you have and I'd love to get your feedback.

anton96• 4 years ago

Hi!

Thanks for this lib, it looks very nice so far.

I was wondering if DFlex supports nesting containers inside items in infinite depth. I saw you had nested example but I couldn't drag on item on the other container.

None the less promising, you say it's still in development, is there some aspects you are more specifically working on?

jimmy202026• 4 years ago

It's designed to handle nesting, so each register element can have depth starting from zero. But it's not finished yet. There are so many aspects to cover but nesting is not fully implemented. My priority right now is to enhance scrolling and migrate between scroll containers.

Edit: I'd like also to hear back from the community, I welcome any suggestions about the roadmap and what's necessary to be shipped soon.

pamelafox2• 4 years ago

I spent a long time a few weeks ago looking for a replacement for jQueryUI's sortable(), but none of the DnD libraries supported both sortable and the grid option out of the box. Would yours work for that? Here's where we want to use it: https://pamelafox.github.io/faded-parsons-static/problem.htm...

jimmy202026• 4 years ago

Good question. Internally every registered element has a grid position inside its own container [1]. And it's not CSS grid styling, it actually calculates the geometry in each element and positioned them relative to their parent container. This is the implementation behind the enhanced transformation. Based on the grid position, DFlex can call the right method responsible for transformation instead of checking siblings linearly. For example, if you transform an element in the middle of the container it only invokes the switching position method instead of iteration in the entire tree. Still, grid implementation is not fully implemented and supported yet. But it's something that can be done in the next releases. However, the link you shared has an interesting case because you are resizing the element when appending it to the new container. I'd like to see a repo if it's possible but it's a very interesting case I'd love to look into it.

[1] https://github.com/dflex-js/dflex/blob/cbda61af185100a3afb39...

mijoharas• 4 years ago

Could you expand on the limitations you found with the inbuilt API's out of interest?

jimmy202026• 4 years ago

In the nutshell, it's designed to drag an element into a droppable area. So let's say you are dragging a file to be uploaded, in this case, it makes perfect sense to use HTML API. Otherwise, you need a framework that can orchestrate the transformation. It's like using React. In theory, you can manipulate DOM directly in the browser but instead, you use a framework to build your app.

peppertree• 4 years ago

Having done something similar before, 2 things really hard to get right: - animate position shift when the list is reordered. you can't rely on natural dom ordering to properly animate all items - anything that has to do a tree structure

jimmy202026• 4 years ago

DFlex doesn't reorder the elements. 1- It transforms elements by calculating the new position so it can avoid any layout shift this is something essential in the transformation mechanism. 2- It reconciles the transformed element when needed. So instead of replacing the entire children, it replaces only the transformed ones.

chrismorgan• 4 years ago

A request: could you please remove "case" from the font-feature-settings on the root element of https://www.dflex.dev/. It’s wrong (its purpose is to tweak vertical positioning of punctuation to align with all-caps text, which is not the case here), and some fonts (including a couple of the largest font foundries) also have "case" effectively imply `text-transform: uppercase`, and I’m using such a font, so the entire site is inappropriately uppercase for me.

(The rest of the font-feature-settings declaration also doesn’t make much sense: "case" 1, "rlig" 1,"calt" 0: rlig is for other scripts, and calt is a weird thing to turn off. I’d remove the entire declaration.)

jimmy202026• 4 years ago

Sorry for the bad experience and thanks for the feedback.

jscholes• 4 years ago

The live demo[1] is completely unusable for people relying on assistive technology like screen readers and speech recognition, plus anyone using alternative input modalities like the keyboard. Do you have accessibility on your roadmap, to ensure that you're not encouraging users of your library to exclude a large percentage of the world's population?

[1] https://www.dflex.dev/demo/lists/symmetric/

jimmy202026• 4 years ago

Thanks for pointing out the accessibility issue. DFlex stands for a better user experience that includes of course adding accessibility to the main mechanism. At least the essential one. But at this moment, the project is still in development mode and many things need to improve including accessibility.

cosmotic2• 4 years ago

I works suggest a more descriptive word than "modern".

jimmy202026• 4 years ago

What do you suggest?

yamtaddle3• 4 years ago

Some of the things you think "modern" means, perhaps. What makes it "modern"? On its own, the word conveys nothing useful. It's even worse than something like "fun", which at least implies some kind of commitment to a general mood or vibe, since everyone seems to think their offering is "modern", so you can't really take any meaning from it (the only thing that word on its own really suggests, to me, is "needlessly resource-heavy").

solardev2• 4 years ago

I hate to ask, since you built this framework with vanilla in mind... but what happens when you use this with React? Does the "infinitely transformed DOM" work with React components and states? Should we not even try?

jimmy202026• 4 years ago

You are invited to try and give me your feedback or work on any issues you have. The playground and the end-to-end tests are done entirely with React. I am not sure why you suggest it's not going to work with it. Also, it has to be done this way, since how to reconcile transformation is different from than usual reconciler algorithm.

solardev2• 4 years ago

Thank you for the response and sorry about that! I honestly didn't know.

The "Infinite DOM transformation instead of reconstructing the DOM tree with every interaction" bullet, with the "has its own scheduler and reconciler" sentence made it sound like you've purposely implemented your own "lifecycle" system, and I didn't see any mention of React on the readme so I wasn't sure how it'd work together. I don't know what a scheduler or reconciler is, so I wasn't sure what that meant in the context of frameworks. (And edit: And oh, wait, only on a close second reading do I see "compatible with any modern JS framework"... sorry, I ctrl-f'ed the first time).

I appreciate the response.

ape4• 4 years ago

Another prominent library is SortableJS https://sortablejs.github.io/Sortable/

lelandfe• 4 years ago

I was going to recommend Shopify's Draggable, but I now see that it has no active maintainers. https://github.com/Shopify/draggable

caradine2• 4 years ago

dnd-kit is maintained by someone who works at Shopify, but I'm not sure if it's a direct successor or just similar project: https://github.com/clauderic/dnd-kit

caradine2• 4 years ago

It's true that the HTML drag and drop API is pretty limited for more complex interactions. I recently did a lot of searching for a drag and drop library for a board game I'm working on and almost went with DFlex. I decided to go with DnD Kit because of its powerful React API. However, I'm very glad there's a vanilla JS solution as well with DFlex.

jimmy202026• 4 years ago

Thanks for the feedback. DnD kit is amazing and the initial library also is so powerful [1]. But we still need a comprehensive solution. Committing changes to DOM with each interaction and shadow caching is not a sustainable solution for building interactive apps. React or any other framework is not designed for interactivity. So even if you are using React you are not actually getting the benefit of React to reconcile because you still committing changes directly to DOM. That's why I built DFlex which has its own reconciler and transformation mechanism.

[1] https://shopify.github.io/draggable/

solarkraft• 4 years ago

React or any other framework is not designed for interactivity.

I thought that was the whole point. Are we using different definitions of interactivity?

cornedor• 4 years ago

HTML drag and drop does have a few powerful features that cannot be done otherwise. You can move an item outside your app into, for example, a native photo library app. Or even on iPhone, drag/drop an item to iMessage and send it to someone as an image or piece of text. Something that also doesn't work in DFlex is scrolling through a page while holding an item, something that also "just works" with native HTML drag and drop.

jimmy202026• 4 years ago

Sorry for not updating the demo included on the site. But scrolling is working in the newer version. Also, DFlex is not meant for uploading assets to the browser otherwise, it's the future of interactive apps when elements can be transformed and positioned smoothly. This is what I am trying to achieve with DFlex that's why I spent so much time figuring out the optimal solution for reconciling a transformed element instead of adding a layer to html5 and call it a day.

rolha-capoeira2• 4 years ago

I have no idea how DFlex works under the hood (nor any other modern drag & drop library), but I'll share something clever I came up with. I'm sure others arrived at a similar solution.

I had to build something for my employer's website maybe 12-15 years ago. jQuery was the hot, new thing at the time. So was customizing UI. All available solutions used a combination of absolute positioning & coordinates to determine the interactivity of the elements. As you can imagine, it was a finicky, buggy mess.

I found myself wishing I could just use the DOM's own mouseover event -- but that didn't work, because the cursor was only over the element being dragged. My epiphany was this: When an element was picked up (drag start), I could duplicate every element in the set and set their opacities to zero (I called them "ghosts"). If I gave them a higher z-index than the element being dragged, mouseover events would be triggered on the ghost elements and I wouldn't have to do anything with coordinates, ever. It was also, by far, the most efficient solution at a time when browsers kinda sucked.

(I finally had a reason to share this anecdote.)

Anyway, thanks for this library, I'll be taking a look!

jimmy202026• 4 years ago

Cloning elements and duplicating containers are what DFlex tries to avoid. Because the usual implementation is to clone the element (ghost it) and then append a new one with a fixed position. The result is to reconstruct the DOM tree directly with every user interaction which leads to poor user experience and not a very practical transformation. That's why the default thing to do with DFlex is not to clone or change the element position unless there's a need to do so, for example: transforming from a container with a scroll.

rolha-capoeira2• 4 years ago

That sounds reasonable!

To be clear, though: In my old example, there would only be DOM manipulation on drag start and drag end. All interactions between are handled with JS and CSS.

Cheers.

pupppet• 4 years ago

I've never used a drag-and-drop framework that didn't have an issue dragging into the first/last position of nested items.

dmix3• 4 years ago

This looks great. I currently use Sortable.js via Vuedraggable but I was never a big fan: https://sortablejs.github.io/Sortable/

I came across Shopify's recently which has an amazing website: https://shopify.github.io/draggable/

In Firefox I noticed some flickering when dragging a lower item to the top edge of the black box on this page: https://www.dflex.dev/demo/lists/asymmetric/ it might need some debouncing or something since it appears to be repeatedly redordering when it's in right on the edge/border (might not be a standard usecase but it was noticeable).

jimmy202026• 4 years ago

Demos in the site are behind the current version and not being updated to the latest one [1]. And updating the demos will take a while since I have to take resizing containers into consideration. So the current version is 2.x.x while the last one was 3.7.0. Sorry about that.

[1] https://github.com/dflex-js/dflex/pull/573

dmix3• 4 years ago

Ah makes sense. How big is the packaged file you import?

gherkinnn• 4 years ago

The demo works on my phone. I did not expect that.

jimmy202026• 4 years ago

Glad it does. Thanks for the feedback.

DFlex – JavaScript framework for drag and drop apps

Related Stories