Q-List sortable
-
I searched over the forums about it and found that some people (like me) couldn’t use vuedraggable or dragula with List/List Items …
Have someone found a way to create sortable lists that works fine with Quasar, or even is there any plans to include it out of the box in the framework?
Thanks
-
Drag and drop in quasar with vue reactivity would be a KILLER feature.
As for now, It is not possible, or VERY hard, to embed drag and drop in quasar application without quasar support.
In example someone would like to drag and drop tree items, or other elements and mix them with lists or even other vuex objects. If you are using external library (vue-dragula is in my opinion useful somehow) then there are situations, where you just can not do some things because quasar does not let you or actively prevents you from doing this.
So, I just patiently wait for drag and drop support in quasar. (Also for a support for keyboard navigation).
-
Um, can you explain in more detail where Quasar is actively stopping you from using a drag-n-drop library with it?
Scott
-
I would love to have this built into Quasar components as well.
-
@s-molinari sure - some thoughts:
- lack of some kind of extension/enhancement/reverse control support at the (base) component level. One of many good example of frustrated developer who knows what he wants, is this quick find by google:
https://github.com/quasarframework/quasar/pull/2461/files
It means, that if you, as an author of dnd functionality would want to improve quasar, it is as for now impossible, without copying and authoring your own version of components. I’m not saying that his method of extensions is ideal, but quasar needs something similar.
-
some component elements are (IMHO) impossible (currently) to properly implement drag/drop - even, if those component elements could interact with vue models. In example - QTabs and tab headers. As for now, it is better solution to have external draggable qlist with “tabs” than allow to drag’n’drop and reorder those tabs.
-
external libraries should maintain data in vue models which is of course a vue way (which automagically changes visual representation in quasar components). So if you assume, that changes in models (new ordering, new items, items removed) will have a visual representation in quasar components (which is obvious) when you want to have control of behaviour of said quasar components - it is almost impossible. For example, you could sort and reorder elements in table rows, but what if you want to drop dragged row into another quasar component - a qtree and you want to change visual representation of dragged element when it is over a specific tree node?
Without support at library level (quasar) it is VERY hard or impossible to write those scenarios at the application level (wont even mention mobile scenarios). As for now, the application developer is strongly tempted to copy actual quasar source code and build his own components which is… problematic and needs a LOT of work or maintenance. One of the ways to think about drag’n’drop is assumption, that every visual element which is a representation of the state could be dragged. For example, in qtable it could be a content in cell, whole row, or whole column - or - even whole table. In editor, it should be possible to drag’n’drop images into text or from other editors. And nobody expects to implement image drag’n’drop in qeditor by quasar authors - BUT - external library developers should have API and quasar library support to do so if they want to create such an extension or their own component.
I hope I expressed it clearly - quasar IS great and DND support would be just a next step in evolution to total quasar awesomness!
-
@s-molinari another $0.02:
please take a look at this library:
https://github.com/Vivify-Ideas/vue-draggable
I think something similar to this could be embedded in quasar. This library is little different from others, because it is based on DOM elements but supports models via events with datasets. It’s surprisingly powerful, because in effect you have an inverse of control at the dragend level. It allows to implement many interesting drag’n’drop scenarios where you could drag for example user items and drop them on group containers and drag those and drop on security containers. This library uses o concept of datasets - take a look - quite nice.
Unfortunately, just using this library is VERY hard in quasar, because you do not have enough control at qcomponents level. You can not control for example rendering (h function) of qtab headers or other structural quasar elements, which could be dragged. Of course, you could in many situations use component slots and write your own DOM elements with appropriate directives and maybe this awesome library would work - BUT - it should be embedded into quasar and available ad hoc for everyone. Every quasar component should be draggable (and keyboard ready, too - there’s no concept of “focus” actually - yes, I know about some focus helpers in some components, but it is not a full keyboard navigation support at the framework level).
The capability of “draggable” or “keyboard navigable (?)” should be embedded in quasar components just as it is already embedded functionality of “routable”. It is very similar abstraction.
-
Thanks for the explanations.
I myself am, unfortunately, not the experienced developer to offer any sort of decent discussion on this. I’d like to suggest pinging Razvan after 1.0 RC is released, to discuss. I also know, plans are being made by @Hawkeye64 to create a dnd extension for Quasar. Maybe he can give more insight into those plans and possibilities.
Scott
-
Thanks for the explanations.
I myself am, unfortunately, not the experienced developer to offer any sort of decent discussion on this. I’d like to suggest pinging Razvan after 1.0 RC is released, to discuss. I also know, plans are being made by @Hawkeye64 to create a dnd extension for Quasar. Maybe he can give more insight into those plans and possibilities.
Scott
