Draggable: Mirror object is in incorrect position when dragging inside a modal or similar

[ncovercash]

When dragging a draggable item inside a modal (or, I'd imagine, anything else which is similarly offset from the rest of the content), the mirrored item has the wrong coordinates and doesn't compensate for this.

This codepen demonstrates this inside a Materialize modal.

• Library version: 1.0.0-beta.4
• Browsers: all
• Tech stack: jQuery (3.3.1) is the most complex thing in the example, other than that nothing but draggable and Materialize are included

[beefchimi]

Hey!

I made 2 tiny tweaks to your Codepen: https://codepen.io/beefchimi/pen/PQxPNv?editors=0100

1. I added a really high z-index for the draggable-mirror in the CSS - this allows it to be above your modal.
2. I used appendTo on the 2nd instance of Draggable to put the mirror on the body instead of within the modal. You could append this anywhere outside of the modal if you wanted.

The offending code that caused the problem was the transform: scaleX(1) scaleY(1) on the modal. Not sure why this style is needed... nor do I fully understand why its affecting the positioning of the mirror. I've never actually used Materialize myself - but thats where the issue is.

Thanks for bringing this up! Personally I don't believe this is an issue with Draggable. Its just a matter of adjusting the styling based on the consumers specific use case. Closing this issue, but feel free to re-open and reply.

[ncovercash]

Thanks a ton for the help, I wouldn't have thought to do that. It seems I misunderstood appendTo as what where the dragged element would go upon placement.
Thanks!

[tsov]

Maybe we can make the appendTo option clearer by moving it inside the mirror options namespace, e.g.

new Sortable(containers, {
  mirror: {
    appendTo: 'body',
  },
  ...remainingOptions
});

[beefchimi]

@tsov yea thats a pretty good point actually... we can chat a bit about this in person but perhaps we put this on the roadmap for beta5