Quasar: Official Support for Drag and Drop

[turigeza]

Is your feature request related to a problem? Please describe.

Some of the most useful and complex Quasar components are difficult to implement with a drag and drop library. See qTable and qTree.

For example If I wanted to implement drag and drop within qTree with this library
https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/nested-example.vue
I would need to wrap q-tree__node within <draggable>. I have no easy way of doing that.

Describe the solution you'd like

Official support and guidance for a Drag and Drop library which supports mobiles and tablets.
It would mean that components structured in such a way that a well known drag and drop library
such as the above could easily be implemented.

Examples in the different components docs how the supported library could be used.

I don't need support for multiple libraries but only one.

Describe alternatives you've considered
Several drag and drop libraries.I have also rebuilt (bodged) both qTable as well as qTree (just finishing) because of this. Recreating those components is a lot of soul destroying work just to get drag and drop working.

As you can guess I am not the only one to do this see forum posts:
https://forum.quasar-framework.org/topic/3543/drag-and-drop
https://forum.quasar-framework.org/topic/4010/drag-and-drop-in-qtable-did-anyone-succeed
https://forum.quasar-framework.org/topic/4595/q-table-rows-drag-and-drop
https://forum.quasar-framework.org/topic/2619/drag-and-drop-data-table-column-ordering
https://forum.quasar-framework.org/topic/3069/q-list-sortable/2
and more ... I won't list all here. But it is not difficult to see that a lot of people will want drag and drop and will be implementing (most likely badly) their own solutions.

This is one of the most missed features in Quasar IMO. So hopefully you consider it.
Thank you for the great work.

[ddenev]

I second this request, although with a small comment.

Indeed, it's about time that Quasar components are empowered with DnD capabilities. The thing is - should the team focus on building these into the core or should they focus on extending the concerned components so that they can be DnD-enabled with 3rd party libraries, such as SortableJS/Vue.Draggable or even with Quasar's built-in one (i.e. TouchPan directive).

At the end, I would like to be able to use DnD but also to be able to fully customize the experience, e.g. ghost styling, drop zones, etc.

@turigeza, I'm in the same boat as you re the QTree component, so I created this request - #5875 (use-case 1)- to allow me to DnD-enable the component.

I am still trying to figure out whether the Quasar built-in DnD (i.e. TouchPan directive) is an acceptable replacement for Vue.Draggable/SortableJS. If you already have some conclusions I would appreciate if you'd share them.

[turigeza]

@drank

should the team focus on building these into the core or should they focus on extending the concerned components so that they can be DnD-enabled with 3rd party libraries

I think this is really for the Quasar team to decide. I hate to see the wheel reinvented and it is also a lot of work to do it from scratch. I would be happy with either.

@turigeza, I'm in the same boat as you re the QTree component, so I created this request - #5875 (use-case 1)- to allow me to DnD-enable the component.

I have seen it of course. And it might solve your problem with qTree and on a specific library. Indeed we are in the same boat.

But I feel that drag and drop support should be "official" and embraced by the Quasar team because it is very likely that most of us need it.

I am still trying to figure out whether the Quasar built-in DnD (i.e. TouchPan directive) is an acceptable replacement for Vue.Draggable/SortableJS. If you already have some conclusions I would appreciate if you'd share them.

I think that "TouchPan directive" is a long way from a fully developed drag and drop feature. I have ended up using this
https://quasar.dev/vue-components/expansion-item#Installation
I styled it so it looks like a tree as was suggested here on your thread by s.molinari
https://forum.quasar-framework.org/topic/4908/qtree-is-it-possible-to-extend-the-header-slots/4

I then used the above mentioned dnd lib to get it to work. It's a bodge : ). For now it will have to do. Maybe when your feature request gets implemented I go back to using qTree.

[ddenev]

@turigeza, thanks!

[tohagan]

Here's a nice Angular demo of drag buttons that one day we hope we can add to q-items. One tricky case this demo does not implement is drag to top/bottom of view and it should auto scroll so you can drop between items off screen.

• http://angular-material.fusetheme.com/apps/todo/all

Other DnD JS libs and demos that might help Quasar Team to do feature planning ...

• 10 Best Drag And Drop JavaScript Libraries For 2019.
• Dragula

[OnePunchMan007]

https://quasar.dev/vue-directives/mutation#Drag-and-drop-example

[ddenev]

@OnePunchMan007 , thanks but this is nowhere near a proper DnD support.

[IlCallo]

Just gonna drop here a reference on how this has been tackled on Angular

https://material.angular.io/cdk/drag-drop/overview

Not sponsoring Angular in any way (quite the opposite) but if someone wants to make an AE for DnD, this can be used as a checklist for common use cases and inspiration for the code

[ddenev]

@IlCallo , maybe the only thing that is missing IMHO is the nested list DnD. Otherwise, really a very nice implementation for Angular.

[turigeza]

@IlCallo
Nice.

I would also add that I am missing their examples as of how to use it with their tree and table components.

Also it does seem to have a problem on iOS (iPhone) touch devices it wants to select the text while you are dragging.

Apart from that indeed very nicely done.

[tohagan]

Beufy (Vue) has ...

• https://buefy.org/extensions/sortablejs/ - a 'sortable' extension
• Table rows - https://buefy.org/documentation/table#draggable-rows

[mesqueeb]

Just an FYI,

About a year ago I made my own draggable extension for a Quasar project of mine:

here's the demo:
https://quasar-app-extension-draggable.netlify.com/#/

Ever since then I'm using the draggable library: vue-smooth-dnd in my projects, it works really well.

[mesqueeb]

Just another FYI:

I have another extension called Quasar Easy Forms which uses a simple schema to easily generate entire Quasar forms only by writing JSON:
http://quasar-easy-forms.web.app/

Now I also have an extension that can generate QTables with this same schema:
http://quasar-easy-tables.web.app/

Because

1. I didn't want to define my table columns with a different syntax, I wanted the same syntax as the JSON schema for my forms
2. I wanted to utilise my forms to be able to easily generate the cards for the QTable "grid" view

It's really powerful once you understand how the schema works.

Why am I saying all this:

I think it'll be easy for me to add drag-and-drop to the rows of my QTable extension

If there's any request for this, feel free to let me know.

[mroes]

I would also welcome official support for Drag and Drop in Quasar.

It would be nice if we had components like qtree and qtable with the ability to drag items between them and also other components using this dnd.
Ideally it would be compatible or based on a popular dnd library or the HTML 5 Drag and Drop.

[radiantone]

I vote for a generic drag and drop system where any element can be decorated with drag or drop classes that are managed behind the scenes. The element data is thus passed to handlers for drag and drop listeners on the respective targets. It would be fairly simple system and require no modifications to existing components really, just special decorators that handle style updates to drag and drop targets, which can be handled separately.

for example:
Here we declare a drag listener that wraps around a set of elements giving them scope for drag life cycle events for a specific model (e.g. iconDrag). A custom class icon-drag will handle any specific style decorations for that element type. Others can be written or users write their own.

<q-drag-listener v-model="iconDrag">
<q-icon class="drag-source icon-drag" v-model="iconDrag" icon="myiconclass"/>
</q-drag-listener>

Below we decorate a q-tab-panel with drop-target which handles style updates for drag lifecycle events triggered by iconDrag model. The model handles the state and notification to both sides (source and target). icon-drag and panel-drop classes listen for events and update styles accordingly.

<q-drop-listener v-model="iconDrag">
<q-tab-panel class="drop-target panel-drop" v-model="iconDrag" />
</q-drop-listener>

[brakop]

Upvote for this feature, drag and drop for re-ordering lists is super efficient for the user and programmer both. Would love to see this native!

[enmanuelmd5]

Really missed feature, currently been forced to implement a custom kanban board and dragable sorting for table rows that is nowhere near a stable solution yet. Would really appreciate a support improvement for drag and drop, in any case would try to make an extension although not experienced with this.

[aprln]

I'm in desperate need for this feature in my project. I have to switch to another tree component outside Quasar so I can have drag and drop. Hope to be able to switch back to Quasar tree soon.

[brakop]

So had some success recently and thought I would share the solution here. Definitely a hack, but my users can't tell the difference.
Hack 1: Drag and Drop - jQuery sortable. I took the things I was render in Quasar, slapped a Div around it and then set everything in that div to be sortable (within the parent). This looks pretty, but is mostly useless because most of the point of Drag and Drop is to re-order things, and the things you want to re-order are in Quasar, not in jQuery.
Hack 2: Back to Quasar - So to get from the jQuery stop event back into Quasar you use dispatchEvent.
jQuery("#"+$(this).attr('id')).sortable({ containment: "parent", stop: function(event,ui){ window.dispatchEvent(new CustomEvent('ReOrgRows')); //Need this to run in Quasar so that I can re-org the ID's as well as the reportRows }});
And in Quasar you setup a listener for the event:
created () { if (window.addEventListener) { window.addEventListener('ReOrgRows', this.ReOrgReport, false); } else { window.attachEvent('ReOrgRows', this.ReOrgReport); } }, beforeDestroy () { if (window.addEventListener) { window.removeEventListener('ReOrgRows', this.ReOrgReport, false); } else { window.detachEvent('ReOrgRows', this.ReOrgReport); }},
So now you're back in Quasar, but what about the information on what was dropped? Like an ID or where it was?
Hack 3: Global JS variables - While in your stop function, pick up whatever you need for what you're trying to sort, and set it as a global variable by just assigning it MyVar=; If you do it correctly, you can reference any global JS variable while within your Quasar function, including assigning or updating your Quasar variables with your JS values. You have to do this so that Quasar will resume it's state magic afterwards, but using these three hacks you can do sortable on just about anything, it's just time consuming and... well, a hack.

[sebastien-prudhomme]

@brakop Vue.Draggable was not enought for your use case? It works fine with Quasar as it is a Vue component.

[brakop]

@brakop Vue.Draggable was not enought for your use case? It works fine with Quasar as it is a Vue component.

I did not try that, but it looks like a much better way than my hack! Thanks!

[hipertracker]

@brakop Vue.Draggable was not enought for your use case? It works fine with Quasar as it is a Vue component.

I did not try that, but it looks like a much better way than my hack! Thanks!

I could not make it working with q-tree. :(

[Evertvdw]

Also would love to have this as built-in! Currently made it sort of working with the available slots in QTree and using the Html5 drag and drop API. Here is a basic example: https://codepen.io/Evertvdw/full/Bajqedj

I included a polyfill for mobile usage, but I'm not sure if draggable trees are sensible on mobile, especially if you have a tree covering the whole window it will mess up your scrolling.

[bompus]

I was going to attempt this with SortableJS (Vue.Draggable) , but found QDraggableTree created by @mayank091193 which appears to meet my needs for having a draggable tree and supports a parent/child model ( indentation ).

This following comment has nothing to do with tree, but I figured I'd share my experience: For my advanced drag-and-drop logic ( drag/drop across same-origin iframes, source window using Quasar (Vue2), target iframe using Vue3 ) , I've been using SortableJS which Vue.Draggable is built on top of, but couldn't use Vue.Draggable because of the Vue2/Vue3 reactivity differences, but I was able to use SortableJS just fine for my purposes. I tried several other libraries before arriving at SortableJS which was smooth and easy to use for my very interesting use case.