Wrong position when using transform on an element

Hello,

I encountered a problem today with Draggabilly. I have a element that I want to drag with the following CSS :

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

The element, as you can see, is centered on its parent. When dragging it, the end position is not calculated to compensate the transformation. The position is always at the top left of the mouse cursor at half the element width/height distance.

Seems like a bug to me.

Thanks for your work on Draggabilly & have a nice day,

Regards,

Romain.

[wwhyte]

Hi David,

I’m experiencing this too. I’m writing a Cordova app with a lot of custom floating dialogs which I’d like to start off centered in the screen and then be draggable out of the way if they’re obstructing the view of the relevant information. The translate (-50%, -50%) trick above is the most widespread instruction I’ve seen online for how to solve this problem, but as noted, when you try to make the element draggable with Draggabilly it seems to go to where you let go of the object and then apply the (-50%, -50%) translation from there. Which makes it hard to drag objects to the bottom right 😃

I have a variant of this, as well. In this app I’m working with SVG objects that are grown or shrunk to fit the viewport. For me, when this kind of transform is applied, the animation you see on Draggabilly elements is scaled relative to how you move your finger (so if the SVG was scaled by 50%, and you drag straight down by 100 pixels, the element actually moves 50 pixels), but when you drop the element it ends up somewhere completely different to both where your finger is and where the animation would imply that the element should be.

I can provide a sample if it’d be helpful, though this isn’t urgent for me as my workaround is not to make those elements draggable for now.

Hope this is useful.

[desandro]

Thanks for reporting this issue. This may be an edge case — simple work-around is to not use transforms on draggabilly elements. I’ll consider implementing a fix if others chime in.

Add a 👍 reaction to this issue if you would like to see this issue resolved Do not add +1 comments — They will be deleted.