Drag And Drop



  • Agreed… it would be nice if Drag and Drop functionality was built into our components. I know most developers are going mobile but Quasar could really be a leader in the desktop space too.



  • Adding this to quasar will be nice, but could take same time to add it to all components. I just added vue-draggable to my project and it works as a charm. You can link it to all sorts of components. Currently I have it in a qlist to determine my sort sequence



  • Upvote for built-in draggable features, especially for lists and tables 😉



  • @DDP said in Drag And Drop:

    Upvote for built-in draggable features, especially for lists and tables 😉

    and q-tree and q-chips…



  • Currently not working on MacOS Safari so … not a real option yet but a great start 🙂 https://quasar-app-extension-draggable.netlify.com/#/



  • 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.


  • Just FYI,
    I recently found this very promising vue library to add drag and drop functionality:
    https://github.com/kutlugsahin/smooth-dnd

    It seems very easy and powerful.
    I’m trying to play around with it now.





  • @turigeza Any success on your work?



  • @Serhioromano In short no. : )
    The table I have rewritten from scratch there are too many things missing for me or was at the time. (But I am not using it after all because I am not using tables at all with my current project)

    With the tree I have tried to recreate the look of a tree with the https://quasar.dev/vue-components/expansion-item. And it sort of worked : ) But it was way too slow … So I am not using that either. I still have to solve this issue (I am working on something else just now)

    I ended up creating a feature request because I thought it would benefit everyone:
    https://github.com/quasarframework/quasar/issues/5890


Log in to reply