-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Official Support for Drag and Drop #5890
Comments
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. |
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.
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 think that "TouchPan directive" is a long way from a fully developed drag and drop feature. I have ended up using this 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. |
@turigeza, thanks! |
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. Other DnD JS libs and demos that might help Quasar Team to do feature planning ... |
@OnePunchMan007 , thanks but this is nowhere near a proper DnD support. |
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 |
@IlCallo , maybe the only thing that is missing IMHO is the nested list DnD. Otherwise, really a very nice implementation for Angular. |
@IlCallo 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. |
Beufy (Vue) has ...
|
Just an FYI, About a year ago I made my own draggable extension for a Quasar project of mine: here's the demo: Ever since then I'm using the draggable library: vue-smooth-dnd in my projects, it works really well. |
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: Now I also have an extension that can generate QTables with this same schema: Because
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 extensionIf there's any request for this, feel free to let me know. |
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. |
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:
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.
|
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! |
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. |
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. |
So had some success recently and thought I would share the solution here. Definitely a hack, but my users can't tell the difference. |
@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. :( |
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. |
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. |
Sorry. Please use one of the many available DnD solutions. |
How do I use such a solution with Qtree which is one component..? |
There are many DnD solutions which work by taking CSS selectors and working with those, Quasar components follow BEM for inner classes and you can easily hook into them to get what you want |
I use drip-drop and it works just fine. |
hi guys, can someone post here working example? I tried to implement vue-draggable for QTree, but without luck. I know there is QDraggableTree but this one is not working with quasar v2, link thanks |
Q tree might be hard to implement with vue draggable, lists are easier
(because it has this weird template syntax). Maybe you can use sortablejs
and check the css selectors/classes of the elements in a tree. Best tips I
can give you after spending some time on this.
Unfortunately with sortablejs you will have to take care of the underlying
data yourself with events.
…On Wed, Aug 4, 2021, 09:14 LadIQe ***@***.***> wrote:
hi guys, can someone post here working example? I tried to implement
vue-draggable for QTree, but without luck. I know there is QDraggableTree
but this one is not working with quasar v2, link
<mayank091193/quasar-draggable-tree#7>
thanks
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#5890 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AJIOJVOKXZUQBJKNG6BZKKDT3DSGZANCNFSM4J24WWMQ>
.
Triage notifications on the go with GitHub Mobile for iOS
<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
or Android
<https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email>
.
|
Here's an example on how to allow a QTable rows to be reordered via Drag and Drop using SortableJs https://gist.github.com/IlCallo/6abf4826a21662c7e8384a64c43aae53 |
This new Drag and Drop 4k library from the FormKit team might be all you'd dream up for this feature. Includes Vue support. |
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.
The text was updated successfully, but these errors were encountered: