Drag And Drop



  • What a hell, this frame is amazing!!! but, the draggable and dropable component is missing!! 😞 pls!!!



  • I heard rumor someone is working on it as an App Extension…



  • @Hawkeye64 said in Drag And Drop:

    I heard rumor someone is working on it as an App Extension…

    Hope to hear good news about this soon



  • I believe Lucas Ban (@mesqueeb) is doing this. I’ll have to get in touch with him to see how it is going.



  • @Hawkeye64 that would be great





  • This should really be part of Quasar I feel and not an extension. I am going to start bodging the drag and drop today into qTable to start with and then qTree. And many will end up doing the same because sooner or later you will need it. How else are you supposed to organise a tree for example ? There is not many other ways to do it.



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

Log in to reply