Is it possible to combine a custom item creation experience with react-dnd-beautiful?

[troelsrichter]

@alexreardon I've been running a personal task board app for iPad and iPhone (http://kanbana.com) for some years now that I believe complies with many of the same principles that react-beautiful-dnd offers. This makes me happy because I've been waiting some years now for someone to provide a dnd component that where able to compete with the Trello dnd experience. I have an old Silverlight version of Kanbana as well that needs to be replaced with a nice web app. So I've been spending some time now creating a POC with react-dnd-beautiful, but I have some unique ux concepts on how to create tasks and columns that I want to proof is possible too before creating the whole app bottom up based on react-beautiful-dnd.

The creation concept is to tap an hold in an empty space and then a tasks expands from your touch/mouse click and you are able to drag it to any position in a single gesture. the same applies to columns/stages. Here is a short screencast showing the behaviour on iPad:

https://youtu.be/ztuCxNm5N2c

I was hoping that you or someone else in here could help me evaluate if these concepts of creating tasks and columns are durable in a react-dnd-beautiful context. Right now there is a massive learning curve for me since I haven't touched web programming for a decade, but if react-beautiful-dnd can provide the core user experience I'm all in.

I stumbled upon your medium blogposts which got me started.

I know it isn't a issue, sorry - but I didn't knew how to contact you elsewhere.

[alexreardon]

JIRA Software currently has an inline create experience for columns that works with react-beautiful-dnd. It is different to the one you put forward - they expose a create button at particular times.

But back to your idea. What you would need to do is dynamically create a Draggable on mouse down. This is not easy right now as you would need to:

• Create a floating Droppable with a Draggable inside
• Start a drag with the Draggable. Right now this is only possible using user events (which you can fake). If we supported programatic dragging Programatic dragging #162 then this would be easier

I think the design pattern you put forward would be difficult to achieve in the libraries current state. Whether or not it is good UX I am not in a good position to say. I'll close this issue as we cannot action this. But I encourage others who have thoughts on this to continue this conversation.

Cheers @troelsrichter

[troelsrichter]

@alexreardon Thank you very much for your quick response. If anyone has an interest experimenting with this based on Alex's high level approach do not hesistate to contact me. I know it is beyond the scope of react-beautiful-dnd so I don't expect a pretty solution, but something that feels right from the users perspective.

[email protected]

By the way I think most UX experts would consider this bad practice since it isn't explicit in any way, but when you try it out it has a natural feel to it. The UI concept in Kanbana is to remove anything that disturbs the eye including buttons, menu bars etc. so that your content stands out and helps the overall goal in Kanbana which is gaining clarity at a personal level. So there is a meaning behind it even though it may seem odd at first :)

[LuoweiC]

I am a little white. Can you give me some guidance