Drag and drop on mobile

Anvil Q&A
1

Hi,

After numerous efforts i finaly managed to get drag and drop working on mobile to interactively change column sequence on a datagrid.

I’ve used anvil_extras (augment) and a javascript library (https://bernardo-castilho.github.io/DragDropTouch/DragDropTouch.js"

However now the fileloader doesn’t work anymore on mobile!? For whatever reason the on_change event isn’t fired/gets consumed by the js library…

On desktop/laptop (or ipad +keyboard) dragging as well as fileloader works.

Clone link

2

What doesn’t work specifically and on what devices? I cloned your app and ran it on my Pixel 7 in Chrome and as a PWA there’s no unique issue.

Tangentially, when I try to drag the file loader in any platform I get this error:

AttributeError: 'Form1' object has no attribute 'coldragged'
at Form1, line 33
called from app/anvil_extras/augment.py:159
called from app/anvil_extras/augment.py:178
called from app/anvil_extras/augment.py:76
3

Hi duncan,

sorry for not being clear, you can drag the columns of the datagrid to a new position , NOT the fileloader (at last that is not the intention…)
You should click on the fileloader, select a file and then an alert box should display with the name of the file selected, on my mobiles (ipad and iphone) the alert box doesn’t show, meaning the on_change event is not fired/trapped.

4

Hmm, I don’t own an apple device, so can’t confirm that. But the on change event is working on my pixel. The file loader being dragged happens on desktop too so that’s a separate issue

5

Ah, and thanks to duncan dragging the fileloader i now got it working on mobile !

The solution is to set the draggable attribute of the fileloader to false, and then the fileloader works on mobile as well!

1 Like