rkk

Hi @Carl, I actually edited my original question and updated the Codepen example with a clone technique which is working pretty fine right now. But it seems like I've hit some bug in Draggable on mobile phone where the onRelease is never called. Just try it: On PC this will work properly. On mobile, the onRelease method is never called, and therefore the cloned element is never removed. (Tested on Android - Chrome) Is this a bug or am I doing something wrong? EDIT: Ok, it really seems to be a bug with Chrome on Android. I tested it on Firefox on Android and there it works fine too.

Hi, So I have a left sidebar with a bunch of Draggable elements that I want to drag over to the right side of the page. The thing is that the left sidebar is scrollable, and when the page height is too small, a scrollbar is shown to be able to see all Draggable elements. The problem with this is that by making the container scrollable, the content is limited to it's container size (Behaves pretty much like a overflow:hidden). Is there any good way to be able to drag an element outside of a scrollable container? So far I could come up with several approaches but none seems to be working fine. 1. Make the container overflow:visible when the user starts dragging the element, but this way the scroll position goes to the top and other UI artifacts may happen. 2. Clone the element to be dragged and put it outside the scrollable element as an absolute position over the parent element. But so far I was unable to perfectly align the cloned element with the parent element, and the move back animation may get to the wrong position if the user scrolls the sidebar while animating. Is there any "good" way to do this? Or any workaround that works in a less buggy way? P.D: The Codepen shows the minimum example where you have a bunch of elements inside of a scrollable area. When you try to drag it out of the scrollable area you will see it gets hidden. Any ideas how to overcome this issue? EDIT: So I finally implemented the method 2, and it seems to be working fine on PC, but there is some bug on mobile devices. It seems that on Mobile the onRelease method is never called from Draggable. This does works properly on PC. I updated the Codepen example. Test in on your PC and it will work. Test it on your phone, you will drag the element, but the element wont ever disappear. Is there any way to fix this or is this a Draggable bug?

Hi, Is it possible to keep the OnClick event on the Draggable to be triggered including when the disable() method has been called on the Draggable element? From the Draggable documentation, the method disable() should disable the Dragging, not the whole element and its events. But it does. Using a JQuery.click on the element doesn't seem to be an option, as the click event is triggered during drag and drop, and using the mouse pointer location does fix the click on drag issue, but then the whole prevent bubble event gets messed up, and when there is a button inside the element. You can see it here. The only feasible way would be to make the OnClick event from Draggable work always, inclusive when disable() has been called. Is it possible to do so without having to change the Draggable.js library?

Yes!!! That's exactly what I've been looking for. Works perfectly! Thank you very much!

Hi, here is an example. Its very simplyfied but reproduces the same behaviour. Just drag the yellow box to one of the blue or red containers. When the box is attached to another container, the yellow element starts driffting as Draggable still calculates the position from its old position. Is there any way to recalculate the relative position?

Hi, Is there any way to change the 40px of margin for the autoScroll feature in Draggable to a higher value? My page has a toolbar that overlays the page, and the main content of the page has a permanent top side padding of the side of the toolbar. The problem is that due to this I need to drag the element under the toolbar in order to reach the edge and the autoScroll feature to kick in. Changing the 40px value to a higher number would fix this issue. Is it even possible to do so? Greetings and thanks. More info: https://greensock.com/docs/Utilities/Draggable/autoScroll

Hi, I basically modified this example "https://greensock.com/?example=sortable-grid-using-draggable" but I separated it into multiple isolated sections which can contain tiles (Each section has a bunch of tiles which can be reordered, but is independent of the other sections). It is though possible to move a tile from one section to an other. I'm checking in the "Out of bounds" part if the tile is touching an other section, and if yes, I attach it to that section. Everything is working so far, but there seems to be an issue with the relativo position of Draggable. From what I've seen Draggable uses relative translateX and translateY CSS styles to move arround the elements, but when I move my element to an other section, the div element is attached to the new section, and the tile still has the old translateX value, and therefore drifts away from the cursor as the element is positioned in some other place. Is there any way to reset the dragged element position to be relative to the new position in the DOM, and stay under the cursor? Greetings and thanks.