Drag and Drop functionality is added

[mehdimohammadijan]

I have added Drag and Drop functioanlity by incorporating Vue Draggable library (https://github.com/SortableJS/Vue.Draggable).

screen cast: https://watch.screencastify.com/v/sxxf2JcWVYR52ZvG8EHO

[raystorm-place]

Everyone waited long for the drag and drop feature! :rocket:

[slaweet]

@mehdimohammadijan It's great that you worked on adding the drag'n'drop functionality! :1st_place_medal:

I was trying to use your branch and I have the following feedback:

• It contains a lot of unrelated formatting changes (e.g. spaces, new lines, quotes) - this makes it super hard for whoever is going to review this to see what the actual relevant changes are.
• When drag'n'dropping an item, it doesn't emit the 'input' event for me, so it doesn't update the array value I'm passing to vue-multiselect. I was trying to read the changed code to understand why, but didn't get very far because of the unrelated formatting changes mentioned above.
• I think there should be a boolean flag to control if drag'n'drop is enabled (probably with default: false) as I don't want all selects to be re-orderable.

[slaweet]

@mehdimohammadijan I would appreciate it if you also linked/published the code you used to make the screencast. Seeing what are the differences from how I use vue-multiselect would help me to figure out why it doesn't work (update the array value) for me.

[mehdimohammadijan]

@mehdimohammadijan I would appreciate it if you also linked/published the code you used to make the screencast. Seeing what are the differences from how I use vue-multiselect would help me to figure out why it doesn't work (update the array value) for me.

Hello, thank you for your review. inside child component mutating props is not allowed by vue, therefore another array of options is required in parent component to be sent as props to the component. inside the component it uses another collection state for dragging. I am attaching the code, so that you can easily use it.

[slaweet]

Thank you for your reply @mehdimohammadijan

inside child component mutating props is not allowed by vue,

You cannot directly assign something to the value prop in multiselect component, but if you emit input event (as I suggested in https://github.com/shentao/vue-multiselect/pull/1504#discussion_r783942996), then v-model will take care of updating the value, as described in: https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

therefore another array of options is required in parent component to be sent as props to the component. inside the component it uses another collection state for dragging.

Maybe it's not required. See https://github.com/shentao/vue-multiselect/pull/1504/files#r784726690.

I am attaching the code, so that you can easily use it.

Thanks that helps me a lot to understand how it was intended to be used.

[mehdimohammadijan]

I used value prop in v-model directly for draggablility, and additional array selectedOptions is removed. Now it is more clean.