If you remember, couple of weeks ago, I announced that I was building a Drag and drop UI builder for Python.
Well... It's finally here.
You can ...
For further actions, you may consider blocking this person and/or reporting abuse
@thepracticaldev Can you help me with the markdown? There seems to be an extra new line in code block though I have done it correctly, and I keep getting liquid error when using
{{inside a code blockI noticed the same error a while ago in one of my posts.
This is wonderful. I’d love to use something like this for dashboard building, and then just host the dashboard on my network for users.
Simply amazing!!!
Thanks :)
I think windows, when grabbed, should move where they are grabbed. We are used to moving windows by their title bars, but this tool moves them by their center no matter where you grab.
Good work, for productive creation of UIs, the whole think jerks a little too much when you move something
Hey thanks, I spent couple of days trying to correct the drop position. Since I was stuck for quite some time there, I decided to take break and work on other parts of the code and come back to this.
I'll be moving it from the native HTML Drag and drop API to react dnd-kit in the next release. So, it should be fixed by the next release.
Can you explain me a bit more about the "Whole thing jerks too much"? I didn't quite get that. Do you mean the sidebar collapses on hover, if not clicked?
Of course, well. The thing is, as soon as you start dragging a window, too many things happen at once:
what I mean is, the changes to the screen are very, very busy and very jerky. What would help is less garish color additions (the lines that appear for positioning help could be less of a color change compared to the background, like more subtle). What could also help is a gradual change, like an animation taking 100ms that introduces that change. It's too many changes at once that make it look overly busy, I'd say.
The biggest one is definitely 1), but I just think it's too many things that happen at once that made my eyes kind of glaze over at what's happening, haha.
Thanks for your detailed explanation, it's the native drag and drop API that makes the dragging widget semi-transparent (it's more like a semi-transparent image while dragging), it would vary based on the browser's implementation of the API, this is why I am planning to migrate to React DND-kit pretty soon. The original position is shown in case the user drops the window to an area where drop is not accepted, and it can go back to original position.
The dashed border indicates whether the widget's can be dropped over the other widgets blue indicating drop accept and red indicating the drop block. Your feedback is noted and many of these will be changed and fixed by the release of 1.2.0
Ahh, I didn't know the native drag and drop api did this. Last time I used droppable and draggable is... years ago, to be honest. I'm not that much of a web front end dev, but I have experience with UX.
What often helps is looking at popular apps, because they have had a lot of development in that regard. VSCode for example opts to have transitions for every one of these things which puts a lot of the jarringness away.
Très bien, merci beaucoup pour cet outil d’UI !