Official Support for Drag and Drop

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.

[pdanpdan]

Sorry. Please use one of the many available DnD solutions.

[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>