Hi There,
There are several forum posts of drag and drop functionality:
As well as some working examples:
This example uses the https://muuri.dev/ library. And with the help of anvil.js Anvil Docs | javascript this is implemented without any javascript.
How it works:
https://anvil.works/build#clone:XNPRKWO2BH4VXJ75=RKAGE5QMQDE4BTWAMQ675BOC
-
Go to Native Libraries and add this Line:
<script src="https://cdn.jsdelivr.net/npm/muuri@0.9.3/dist/muuri.min.js"></script>
-
Add those two anvil roles to the Assets:
Muuri Drag and Drop constists of a grid (which is more or less the container that enables dragging) and items which can be dragged around.
They need special styling, thus we use Anvil Roles to implement that.
.anvil-role-grid {
position: relative;
overflow: hidden;
}
.anvil-role-item {
display: block;
position: absolute;
margin: 2px;
z-index: 1;
}
.anvil-role-item.muuri-item-dragging {
z-index: 3;
}
.anvil-role-item.muuri-item-releasing {
z-index: 2;
}
.anvil-role-item.muuri-item-hidden {
z-index: 0;
}
- The rest is all standard python/anvil stuff.
Disclaimer
On every update list i destroy and recreate the grid object.
This is not the intended way - but I couldnât get it to work otherwise and it didnât bother me to much.
Feel free to ask, reuse and help improve this drag and drop code for anvil.
Greetings, Mark