tsneddon

I'm not a fan of browser-specific conditionals, but this addition is a workaround for the drag detaching on Android touch screen if allowNativeTouchScrolling is set to true in the draggable. Windows touch screen is still broken. The conditional is necessary because the addition to onDragStart breaks iOS and it won't scroll at all, no matter what allowNativeTouchScrolling is set to. Insert this at the beginning, var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform); and then this when defining the draggable menu. onDragStart: function(e) { if (!iOS) { $("#menu").off("touchmove").on("touchmove", function(event) { event.stopImmediatePropagation(); event.stopPropagation(); event.preventDefault(); }); } }, onDragEnd: function(e) { if (!iOS) { $("#menu").off("touchmove"); } }, Here's a codepen that includes these changes. https://codepen.io/t-sneddon/pen/mdevZKG

Here are my testing results (3.0.2) Android: allowNativeTouchScrolling = false Scrolls. This is not expected. Drag broken. Draggable releases from touch after moving a very short distance. Can't drag menu unless you grab it from the grey grab bar. Android: allowNativeTouchScrolling = true Scroll works. Changing axis of scroll motion to horizontal during a scroll event does not release scroll. This is what I would expect. Drag broken. Draggable releases from touch after moving a very short distance. Can't drag menu unless you grab it from the grey grab bar. iOS: allowNativeTouchScrolling = false Scrolls. This is not expected. Drag mostly works. Changing axis of drag motion to vertical during a drag event releases the drag event and begins native scrolling. iOS: allowNativeTouchScrolling = true Scroll works. Changing axis of scroll motion to horizontal during a scroll event does not release scroll. This is what I would expect. Drag mostly works. Changing axis of drag motion to vertical during a drag event releases the drag event and begins native scrolling. Windows (Chrome, touch screen): allowNativeTouchScrolling = false Scrolls. This is not expected. Drag broken. Draggable releases from touch after moving a very short distance. Can't drag menu unless you grab it from the grey grab bar. Windows (Chrome, touch screen): allowNativeTouchScrolling = true Scroll works. Changing axis of scroll motion to horizontal during a scroll event does not release scroll. This is what I would expect. Drag broken. Draggable releases from touch after moving a very short distance. Can't drag menu unless you grab it from the grey grab bar. https://codepen.io/t-sneddon/pen/wvKRogj

Here's a CodePen illustrating an issue that I've struggled with on and off again for a couple of years now. I'm not sure if these struggles are due to my misunderstanding, or if there is a problem with Draggable.js. This first demo is using the latest version of gsap and the beta version of draggable. I'll add a reply with a demo and analysis of version 3.0.2, which behaves differently. The menu pulls out from the left. (Could be a little more refined, but it works for this demo.) The shaded gray region at the right of the menu is a little grab bar that protrudes when the menu is closed. The button in the middle toggles allowNativeTouchScrolling for the draggable menu. For testing on Android and iOS you'll probably need to use the debug view of the codepen in order to fit everything properly. Here are my testing results (beta Draggable): Android: allowNativeTouchScrolling = false No scroll (expected). Drag works. Changing axis of drag motion to vertical during a drag event does not release drag. This is what I would expect. Android: allowNativeTouchScrolling = true Scroll works. Changing axis of scroll motion to horizontal during a scroll event does not release scroll. This is what I would expect. Can't drag menu. Draggable releases from touch after moving a very short distance. iOS: allowNativeTouchScrolling = false No scroll (expected) Drag works. Changing axis of drag motion to vertical during a drag event does not release drag. This is what I would expect. iOS: allowNativeTouchScrolling = true Scroll works. Changing axis of scroll motion to horizontal during a scroll event does not release scroll. This is what I would expect. Drag works. Changing axis of drag motion to vertical during a drag event does not release drag. This is what I would expect. Windows (Chrome, touch screen): allowNativeTouchScrolling = false No scroll (expected). Drag works. Changing axis of drag motion to vertical during a drag event does not release drag. This is what I would expect. Windows (Chrome, touch screen): allowNativeTouchScrolling = true Scroll works. Changing axis of scroll motion to horizontal during a scroll event does not release scroll. This is what I would expect. Can't drag menu. Draggable releases from touch after moving a very short distance.

Sorry for the long delay. I've verified that every aspect of this particular issue is solved with the Beta release. Thank you for taking the time and making the effort to help solve this. That's why gsap continues to be the best! I have one other problem that I've been fighting on and off for quite a while, but that will be the subject of another post, since it does not involve any of the original 4 issues of this post.

Beta version of Draggable fixes bounding issue. Thank you! Beta version of Draggable fixes long touch before dragging. Thank you! Still has issue of detaching if the user slightly swipes down as finger comes in contact with circle. This is easy to see on Android, but on iOS you must precisely swipe vertically as you begin the touch event. It's kind of hard to achive, but because it can be done I guess it removes the browser-specific angle to this issue. https://codepen.io/t-sneddon/pen/QWjZwQZ

Thank you very much for your reply Jack. I guess our posts crossed in the mail, so to speak. Cross browser issues can be a nightmare. What I'm dealing with is Apache Cordova apps that run in both Android and iOS, so I really only need to deal with Android Webview and Webkit for iOS. Putting in conditional workarounds based on platform is something I try to minimize, but I realize that it is sometimes necessary. Thanks for the suggestions. I'll add them to my bag of tricks. I did realize though that the issue mainly stems from the different box model, but it is nice to be able to create a draggable element, and the do whatever is required to render it visually via the css. I try to keep the functional elements of animations in JavaScript and visual style in css as much as possible. Item 2 in my original post does refer to the draggable element becoming not draggable. If the user's touch is imprecise, and instead of just poking the circle and dragging right, the finger comes to rest with even a slight downward (or upward) swipe, the draggable circle becomes not draggable and the user has to try again. This is only on Android (Webview or Chrome), which is a big deal for me since one half of what I'm creating is Android apps. I believe that there is some underlying issue involved with this behavior, because I have had "detachment" issues in the past with draggable UI elements. In fact, for an app I am currently working on I had to revert from v3.2.6 back to v3.0.2. Something must have changed that caused two of my draggable UI elements to not work. They would detach <edit>in a fraction of a second</edit> if the drag was more than a couple tenths of an inch, when they had functioned flawlessly before updating gsap. Thanks, Tom

Here's a small addition that illustrates the positioning issue. I'm not sure if the issue is with the Draggable plugin, or the browser itself, but somehow the two don't agree on something. I've added both an X and a Y coordinate to return to onDragEnd, even though the circle is only draggable in the X direction. Note that the position of the draggable circle is correct at the begging when the page first loads. After onDragEnd and the circle tweens back to the home position, it is offset in the Y direction the same distance that the drag bounding is off in the X direction. https://codepen.io/t-sneddon/pen/JjYmjrw

I have a Draggable demo that displays some odd behavior, especially in Android webview (and Chrome). Here's a list of what I am seeing. Swipe arrow to the right and watch what happens. Do the same in Chrome on Android. If you hold your finger for too long, the click event will fire and detach your finger from the draggable element. I've tried everything I can think of to stop this from happening with no luck. In Chrome for Android, if you are swiping down as you begin your touch, it will almost immediately detach from the .circle element. This behavior does not happen on iOS or with Windows using a touch screen. The draggable circle (.circle) is bounded by the containing element (.drag-channel). It appears that the width of the bounding region is correct, but it is misaligned as it starts at the outside edge of the lefthand border of .drag-channel. Because of that, it stops short of reaching the righthand edge of the .drag-channel. In iOS, if you tap the circle and release really fast (it's hard to do), the background color seems to stick in some kind of intermediate state. I'm not sure if this is an issue with the onPress and/or onRelase events, or an internal issue with css in webkit. If someone with more experience with Draggable could take a look at this for me I would appreciate it greatly. Thanks, Tom