search

desandro / draggabilly

:point_down: Make that shiz draggable
https://draggabilly.desandro.com
MIT License
3.86k stars 386 forks source link

Drag outside overflow: auto div #130

Closed Zeladgolan closed 8 years ago

Zeladgolan commented 8 years ago

Hi, I have a div with overflow hidden/auto, Whenever I'm trying to drag an element outside this div the element is hidden. I've looked for many solutions (css, js) and didn't find anything. Do you have one? E

BTW adding position:absolute to the draggable element isn't a proper solution because it'll ruin the element position..

desandro commented 8 years ago

I'm sorry to see you're having trouble with Draggabilly. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.

Zeladgolan commented 8 years ago

Hi, Thanks desandro. Here's a test case, forked from demo: http://codepen.io/thegenda/pen/oxQrpL

desandro commented 8 years ago

Thanks for that! You cannot drag the element outside its parent container because overflow: hidden prevents the draggable element from being displayed outside of the container. The only way to fix this is to either remove overflow: hidden, or have the draggable items HTML outside of the container.

Zeladgolan commented 8 years ago

Hi, Thanks for the answer. I know why it happens, I've looked for a workaround.. There's couple of workaround on different projects like draggable, and so.. Thanks anyway.

Zeladgolan commented 8 years ago

Hi, Checkout this workaround, I've update the codepen example. All I did was to add this line to the dragStart function: event.target.attributes[4].nodeValue = event.target.attributes[4].nodeValue.replace("relative","absolute"); It simply change the draggable element from relative to absolute. Please tell me what you think :-). May it worth adding this option to your project. http://codepen.io/thegenda/pen/oxQrpL The only thing that still bothering me it the when I start dragging the element jumps to a different place, because it's position become absolute. any ideas how to fix that?

desandro commented 8 years ago

Draggabilly will not work properly in this scenario. Sorry, there is no workaround that will be reliable.

amitguptagwl commented 6 years ago

I'm facing the same issue and found that jquery draggable handles this situation with property helper: "clone". I'm wondering if we similar solution in draggabilly?