[bug] in force-fallback mode cloned element position is calculated wrongly

[ArmoGidec]

In case when draggable component has vue-fragment component as one of parent element and force-fallback setting is on, the cloned element has wrong position

Step by step scenario

1. Go to https://n6uhi.csb.app/
2. Try to drag any element and you will see that the cloned element isn't under cursor position

Actual Solution

The cloned element has position as in end of list

Expected Solution

The cloned element has position exact as the cursor

Codesandbox link

https://codesandbox.io/s/vue-fragment-vuedraggable-bug-n6uhi?file=/src/App.vue

[David-Desmaisons]

In your example the draggable component has no list nor value props setted that can not work.

[ArmoGidec]

@David-Desmaisons, I have added v-model, but it still doen't work correctly.

[ArmoGidec]

That's what I'm talking about how it look

That's when 'fragment' component is removed how should it to be

[SylvainBigonneau]

I can confirm I am getting the same issue when force-fallback is set to true: all draggable element ghosts pop from the 1st element, there is a positioning issue. This is whether I use list, value or v-model.

Here is my pug code :

        draggable.card-container(
          v-model="elems",
          @end="elemMoved",
          draggable=".elem",
          handle=".handle", /* this div is inside the Card component */
          :scroll-sensitivity="100",
          :scroll-speed="20",
          :force-fallback="true"
        )
          Card.elem(
            ref="card",
            v-for="(elem, index) in elems",
            :key="'elem-' + elem.id",
            :elem="elem",
            :index="index",
            @update-field="updateField",
            @delete-elem="deleteElem",
            @add-elem="addElem"
          )

[ArmoGidec]

@SylvainBigonneau, I had to use hack to solve this issue in mine project

const _parseInt = window.parseInt;
function parseInt(...args) {
  return _parseInt(...args) || 0;
}

window.parseInt = parseInt;
window._parseInt = _parseInt;

[ArmoGidec]

The real problem is not in this vue component, but in his dependency (SortableJS).

[scottyzen]

Has anyone found a fix for this yet?

[WaseekSenju]

I can confirm this issue as well.