I use vuedraggable with Vue.js 2 project. I have two groups (call it catalogues) from which I'd like to drag items to a target group. E.g. there's a catalogue of "yellows" and catalogue of "reds", which I want to combine in the target list of "oranges".
Is there a solution, that would enable dragging from "yellows" to "oranges" and from "reds" to "oranges", but prevents user from dragging between "yellows" and "reds" groups?
So far, I'm only able to set group names for all the three groups (two sources and one target), but that doesn't prevent the user from draggin the items between the two sources (which is not wanted).
Thanks for any suggestion.
Actually, this was easier than I thought...
The key is to correctly set up the draggable
components. All the three lists need to share the same group name, but the first two (catalogues) must have pull
and put
options specified. So the group
attribute must be set as an object. If put
in this object is set to false
, that list simply doesn't accept incoming drop requests.
<draggable
:list="yellows"
:group="{ name: 'universalGroup', pull: 'clone', put: false }"
:clone="cloneYellow"
>
<draggable
:list="reds"
:group="{ name: 'universalGroup', pull: 'clone', put: false }"
:clone="cloneRed"
>
<draggable
:list="oranges"
group="universalGroup"
>