Is there a way for users to drag and drop a component around in the running app?
If I look at project management and survey building apps, they typically have this kind of interactive/tactile workflow, and I’d like to simulate that in Anvil. Like the following:
If this can be done already, please let me know.
Definitely not a direct answer to your question as you’d have to draw your own controls, but I did a canvas based drag/drop demo -
https://anvil.works/build#clone:7GHW5Q6W4AYX35SH=BQTJNV3KSFV5PSW65RB3NN6B
No JS, all Anvil. Click on the canvas to create a new yellow box. Drag any box to move it.
Thanks David. The canvas approach could work in some cases. I was looking for something that could leverage components that already exist in the Anvil toolbox.
I guessed so 
but I thought I’d throw it out there.
You’ve poked my curiosity now …
We all benefit when that happens!
You’re going to need to do something like this :
https://anvil.works/build#clone:YTXE5RIVLZHP3B2W=XE2TL2GZDTXR2IVNSUYT7ZPZ
This sets the draggable stuff on the form itself, so each group of components you want to drag and drop would need to be in a custom form.
Watch the console in the inspector to see the events. Then you’ll need to use the callback from JS to Anvil to fire form events.
The main problem which I’ve yet to tackle (which I think might be the real sticking point) is how to uniquely identify the component being dragged (from an Anvil perspective). You can’t set the #id unless you are creating them in html (well, no that I can see yet anyway), and using roles to add classes limits you.
It’s flawed (and it’s late) but it passed an hour
I’ll probably look at this again tomorrow…
That’s fantastic! I will need a second to get my head around this. I appreciate you taking the time to show me how it might be done.
I’ll file this under feature requests for now, and spend some time understanding how you’ve done this.
Hi guys, is there any news on this topic/feature? I am looking for a way to let users reorder the items of a repeating panel via Drag n Drop. Sadly, the demo app of @david.wylie “DEMO - dragdrop experiment on anvil components” isn’t working for me. I get “unreachable code after return statement” from skulpt.min.js in the web console.
Hmm, it does seem to be broken now.
I’m a little tied up at the moment, but i will revisit when I get a moment.
As far as I know, there is no native Anvil way of doing this at this point. So, clever solutions like @david.wylie’s is what would be needed.
Ok, try this :
https://anvil.works/build#clone:YTXE5RIVLZHP3B2W=XE2TL2GZDTXR2IVNSUYT7ZPZ
I had missed off the payload in the drag start event. This must have relied on a bug before which I assume is now fixed.
Again, it’s only bare bones, but it does at least fire all the events now.
I might have a need for this myself soon, so this might get a bit of work done on it…
