Hi everyone. I made the draggable extension for a project of mine about a year ago.
The downsides of my extension were:
- I only ever required being able to drag rows. Not “any component to any other location”.
- I never found out why it didn’t work on macOS
- I learned a lot since I first made it, and would do it all different now…
The project is still a side project, and I plan to start working on it again somewhere this year. At that time I was planning to rewrite it from scratch with the new Vue 3 composition api; better separation of code; TypeScript.
But I think until that time many more devs need drag and drop for a variety of reasons, so I wanted to give some advice:
- Whenever you start building it, use the quasar-starter-kit-ui it’s really good for modular components complete with a demo project for you to HMR test your standalone component you’re building.
- When you start building the ui component, you can try to get ppl involved via discord so the community could work together.
- You’ll most likely track the mouse position to calculate the css of the element you’re dragging, to calculate where to drop the element and how the UI should look, I’d suggest try using the on-mouseover directive.
- Try to immediately set up a demo with numerous test items to drag. To see if it’s performant. I had a problem where it became slow after 300+ items, but it was too late because I always tested with about 10 items.
