3 ms·

This has been my experience too. Every React DnD library I have used has had some painful moments for me, sometimes super painful. For the app I am working on n

by city41 6y ago

This has been my experience too. Every React DnD library I have used has had some painful moments for me, sometimes super painful. For the app I am working on now I have pretty simple DnD needs so I just rolled my own using mouse events. it's about 100-200 lines of code total and works great. To the library authors's credit, I think creating a general DnD library that can address most use cases is tough.

tekstar 6y ago
This is all I want, too. But if you go the DIY route, don't you end up chasing the long tail of browser and device compatibility issues and bugs? I typically solve my own issues but this one just seems like a huge and uneven surface area. I would love to see your 100-200 lines if you are willing to share. Not asking you to ship it and support it and end up the N+1'th unsupported DND library though ;)
- city41 6y ago
  Yeah, rolling your own is probably a bad idea in most cases. My implementation doesn't generalize at all really and I only need to support desktop browsers. If I ever own source this app I'll let you know. But basically I have one component listening to mouse events and firing callbacks with the rectangle the user has dragged (mouse down point to most recent mouse point), and with that my state manager updates things accordingly and drops upon mouse release.
- tmotwu 6y ago
  Its sometimes worth going the DIY route, especially in this case. Drag and drop could cause all sorts of compatibility issues if you try very hard to generalize, sure. I wrote my own as well, not in 100-200 lines granted. Dependency free ~300-400sloc using basic mouse events and element calculations were enough to implement advanced behaviors such as snapping, collision detection, free movement, packing, swapping, containerization. I had lots of freedom on how it behaves and was able to tweak it to what I wanted, something probably impossible with general dnd libraries. It works the same in most modern browsers I've tested, since it's only using DOM apis for basic events and style modification. Libraries are great if you need established algorithms and data structures. Building out custom UX interactions, presumably like interacting with DOM objects, DIY was easier since there's actually very little work to do.

by city41 6y ago

tekstar 6y ago

This is all I want, too. But if you go the DIY route, don't you end up chasing the long tail of browser and device compatibility issues and bugs? I typically solve my own issues but this one just seems like a huge and uneven surface area. I would love to see your 100-200 lines if you are willing to share. Not asking you to ship it and support it and end up the N+1'th unsupported DND library though ;)

city41 6y ago
Yeah, rolling your own is probably a bad idea in most cases. My implementation doesn't generalize at all really and I only need to support desktop browsers. If I ever own source this app I'll let you know. But basically I have one component listening to mouse events and firing callbacks with the rectangle the user has dragged (mouse down point to most recent mouse point), and with that my state manager updates things accordingly and drops upon mouse release.
tmotwu 6y ago
Its sometimes worth going the DIY route, especially in this case. Drag and drop could cause all sorts of compatibility issues if you try very hard to generalize, sure. I wrote my own as well, not in 100-200 lines granted. Dependency free ~300-400sloc using basic mouse events and element calculations were enough to implement advanced behaviors such as snapping, collision detection, free movement, packing, swapping, containerization. I had lots of freedom on how it behaves and was able to tweak it to what I wanted, something probably impossible with general dnd libraries. It works the same in most modern browsers I've tested, since it's only using DOM apis for basic events and style modification. Libraries are great if you need established algorithms and data structures. Building out custom UX interactions, presumably like interacting with DOM objects, DIY was easier since there's actually very little work to do.