Vue.Draggable: Dragging from multiple groups into one target group

user_16471114 0
Viewed 1280

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.

vuedraggable
1 Answers

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"
      >
user_164711140
Related