![]() ![]() It's just been a few days, but they seem to pair great together. I'm very grateful for people like you who are willing to help out designers like me with tools that bring the complexities of app development into closer alignment with the complexities of product design so that moving between the domains is less jarring.įYI, I'm using react-dnd in combination with react-flip-move for animating layout changes. I know there's some amount of selfishness here, but I imagine there's more than a few designers who also happen to code in front-end development who act this way. Besides simply not being good at solving issues that arise in libraries like this, it's really not the kind of work I normally do and I wouldn't "trust" my solution. Though I use this tool, for example, my head is naturally thinking about very different kinds of problems. Speaking personally of why I don't make pull requests for open source projects (so far, anyway).I'm a designer. The main feature I care about given the already wonderful API is solid touch support. The only issue I've run into so far was in the touch backend, but I was able to make a quick hack to move forward and someone commented they are working on a more general pull request. The biggest win IMO is that react-dnd provides just the right level of abstraction for managing DnD functionality across the whole app.īesides being able to ditch the awkward combination of isolated, one-size-fits-all drag components (sortable, etc.), I was able to add some drag based functionality in a matter of hours that I had previously written off as too complicated to be worth it (for example, dragging a card to re-sort within its list OR onto a user list icon to show a user list, then dropping it onto the appropriate user). It is amazing! Thanks so much for your work! I just added react-dnd last week to a (yet to be released) education web app. Initially I tried to make the Folder component a DropTarget but that didn't work cause then I was unable to sort the other Node DropTarget User ends the drag which dispatches an action that persists the new position of the node on the server and transmits it to all connected socket clients.Ĭurrently we use some math (a variation on the sortable example in this repo) to calculate wether or not a node is on or below/above a folder.(the entire tree is part of the application state). User hovers over a node -> display an indicator of the new position, the position of this is dispatched with a redux action.User starts dragging a node, the node stays in it's position.This interaction comes with a lot of flickering, some buggy behavior and occasionally a decrease in performance. A user can either drop a something on a folder which will cause it to nest or sort it below or above another node. We have different types of nodes (folders, lists). One of the bigger issues we experienced was implementing the tree view that supports nesting and sorting. We face a lot of problems with the tree view that supports nesting and sorting, Very useful, it's very easy to separate the dragging logic from your component and test it individually. It's also a collaboration tool so most of the interface updates are dispatched to a socket server. A list/card view similar to Trello, only supports sorting.A tree view where you can sort and nest nodes.Using it for a client project that has a lot of drag and drop interaction. react-dnd makes it trivial to implement the file drop zone. This is basically just me playing around. I've seen react-dnd-touch-backend, but I don't know how I'd mix both.Ĭan you attach a couple of screenshots of your product? I haven't done any kind of mobile support, but I don't know how I'd target both desktop and mobile. ![]() Testability! My previous experiences with drag and drop were rather poor, and nobody tested their drag and drop related code. ![]() Overall, it seems like the library does everything I need it to do. Perhaps having a visualization to shows all the parts would make it easier to remember. This happens even after having used it multiple times. How often do you have issues with it, and how frustrating are they?Įvery time I use the library, it takes me a while to remember how it all comes together: where each part goes and what it does. I'm very confident that it can be used to implement sophisticated drag and drop interactions with ease. It's easily the best drag and drop lib I've used. We use it in our new web console at Treasure Data. What products are you using React DnD in?
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |