How to make a div drag and drop for rearrangement?

mesmoiron · 2024-08-23T18:28:42.621+00:00

Hi,I want to make movable cards that can be move around in a grid like container. In the side menu, items can be moved up and down. I also want the items to move left and right and vise versa, such that the other items move out of the way. Any suggestions?

mesmoiron
1 year ago
Hi,

I want to make movable cards that can be move around in a grid like container. In the side menu, items can be moved up and down. I also want the items to move left and right and vise versa, such that the other items move out of the way. Any suggestions?
mesmoiron
1 year ago
How to make a div drag and drop for rearrangement?
Lucas G
1 year ago
@Max's drag and drop package might help
💪1
Max
1 year ago
I don't fully understand what you are trying to do, but if it is basically a drag and drop list, the Spark Drag and Drop package could be a fit, as @Lucas G mentioned 😊
@Max
I don't fully understand what you are trying to do, but if it is basically a drag and drop list, the Spark Drag and Drop package could be a fit, as @Lucas G mentioned 😊
mesmoiron
1 year ago
Thank you, that is helpful. I am trying to make a simple dashboard that can arrange the items. Like graphics applications, where you can move the panels around. Move things out of the way.
Max
1 year ago
If this is in a defined grid or list, it should be doable with the package
Lucas G
1 year ago
It is possible to do it with native toddle, I did it in the starter pack's dnd list but I didn't go the extra mile of making it mobile friendly, etc
Max's package uses sortablejs right? Which is great for that type of thing
@Lucas G
Max's package uses sortablejs right? Which is great for that type of thing
Max
1 year ago
Correct. It is just a wrapper.
Alex
1 year ago
Does the package go through how to reorder items in a database once dragged??
I’ll build it into my directory this week for users to reorder their image gallery if so
Lucas G
1 year ago
The one I made does give back the new array order and I'm sure Max's package does as well
Alex
1 year ago
Okay that’s great. I’ll have a play! A neat little feature for my CRM build and for my render directory.

If I can get it working it’ll be so good
@Alex
Okay that’s great. I’ll have a play! A neat little feature for my CRM build and for my render directory.

If I can get it working it’ll be so good
Armand
1 year ago
Have a look at the explanation vids on the package page. Max explains how it works really well
😊2
@Max
If this is in a defined grid or list, it should be doable with the package
mesmoiron
1 year ago
For now I have cloned the package, and I am going to step by step recreate it. This will be a huge learning opportunity to sort out advanced techniques with functionality that keeps me motivated and understand how its build up. Thanks.
💪1

How to make a div drag and drop for rearrangement?

mesmoiron

mesmoiron

Lucas G

Max

mesmoiron

Max

Lucas G

Max

Alex

Lucas G

Alex

Armand

mesmoiron