in Dialog or Modal the drag maybe cause position offset

[0xbul1]

Hi @amendx

First, its awesome repo thanks a lot.

But i Found a problem in some need

look my picture

the count 1 is my cursor true position
the count 2 is the drag baby position

the positon has offset

this is demo link

i found a repo like your repo vueSlicksort
the vueSlicksort provide a appendto props in his SlickList Component like you Container Component
how can i solve the offset question?

thanks again.

[freegns]

@amendx Excelente contribución, en el futuro seria interesante una versión para angular.

[amendx]

@0xbul1 I've made some changes inside your demo link using :get-ghost-parent="getGhostParent":

getGhostParent() {
      const element = document.querySelector('#dialog').children.item(1);
      return element.children.item(0);
    },

• I tried to just simulate what you could do in this case, since the getGhostParent does pretty much the exact same thing as you wondered about the appendTo. The issue in the example was the positioning of the dialog, wich could be causing the draggable element to get positioned "outside" the targeted container. Try that out on your project and see if that still happens.

[0xbul1]

Hi @amendx, Sorry for the late reply.

emmm, sorry its my fault.
Perhaps the position offset is not caused by appendtoprops?

I change the demo and in my before project i do like this.
and the SlickSortproject will be no position offset.

so now i change the same code use vue-dndrop.
but vue-dndrop still have position offset like this video
you can confirm use Open in New Window LIVE in the demo link page or click there directly ( must do this watch example in big screen, You will find the same problem as in my video)

[phislop-sra]

I've encountered this problem as well, and I've made a bit of progress on finding the cause. It appears to stem from any use of a transform style on a parent of the drag container. I've made a more minimal example with scale(0), which has no impact on the display but still messes up the tracking on the ghost item.

[amendx]

@phislop-sra Nice! I'll take a look at it. I'm repairing some code to fit other issues as well. Hope I'll find your solution!

[thebleucheese]

Note that adding transform: unset style to the dialog or overlay component will generally resolve this issue