Pull: 'clone' doesn't work when set programmatically

[JivanRoquet]

First check https://github.com/SortableJS/Vue.Draggable/blob/master/CONTRIBUTING.md

Jsfiddle link

This is a Jsfiddle link to show that the SortableJS library in itself deals perfectly fine with this scenario — therefore indicating that the issue might come from VueDraggable: https://jsfiddle.net/dpm9vryb/6/

Step by step scenario

1. create a Vue component
2. in this component, create two Sortable containers with <draggable/> component
3. for each of them, set the props :group="{ name: 'drag', pull: pull }"
4. add a pull() method to your component with the following code:

pull() {
  // check something, and depending on the result, return either 'clone' or true
  if (currentlyPressingControlKey) {
    return 'clone'
  } else {
    return true
  }
}

5. add v-model="items_1" and v-model="items_2" to the container elements
6. manage these items_1 and items_2 array with Vuex as advised by the docs:

items_1: {
  get() {
    return this.$store.state.items_1
  },
  set(newList) {
    this.$store.dispatch({ type: updateList1, newList: newList })
  }
}

Expected Behaviour

If the user clones from List1 to List2 with ctrlKey pressed, these three things should happen:

1. the item being cloned should still appear visually in the origin container's html element
2. the item being cloned should still be contained in the newList value passed to the Vuex action callback for items_1 (the origin list)
3. the item being cloned should appear in the newList value passed to the Vuex action callback for items_2 (the destination list)

Actual Behaviour

Among these three expected behaviours, only 1. and 3. happen, and 2. does not.

It means that visually, the old list still contains the cloned (duplicated) item, and the item was correctly passed to the destination list in Vuex. However, Vuex received an update for the origin list which doesn't contain the duplicated item anymore, and therefore according to Vuex state, the origin list now doesn't contain the item anymore, which is in total contradiction with what the user sees visually.

Important note

When the group.pull parameter is hard-set to pull: 'clone', then everything works correctly and Vuex receives the correct items for each of the two lists.

The issue described above only happens when the pull: 'clone' value is determined programmatically via a function.

Impact

It seems that this issue causes a total impossibility for VueDraggable to provide a "duplicate-on-demand" (e.g. user presses Ctrl Key while dragging) capability. If it was not for this bug, it would be perfectly feasible.

[David-Desmaisons]

Same as issue #504

[David-Desmaisons]

Solved by PR #584
Check also: https://sortablejs.github.io/Vue.Draggable/#/clone-on-control
Will be available in upcomin version 2.20.0