Website not Scrollable without touching the Scrollbar

[iArnoldo]

So i managed to get Touchpunch work in the IE11 but now it appears that i can not scroll the website by dragging it down. I have to scroll it via the scrollbar anyone got an idea how to solve that problem?

Cheers A.

[karthiksmart]

I have the same issue. I used Drag and Drop for sorting an . I am salesfroce Visualforce page for developement. When i included Touchpunch js, sortable(using Drag & Drop) is working fine. But No scrollbars are there and Page is not scrolling down

[Raymond-Naseef]

This is not an issue with draggable, it is issue with using "mouse move" (finger on touchscreens) for 2 things. I played with different options breaking a draggable div into 2 parts: 1 part that drags it, and other part with scrolls: they do not work so well.

The easiest solution is to add a button changing the div's "mode" from draggable to scrollable. It looks like removing dragging on my Samsung 10.1" Galaxy requires create/destroy. Here is example of function to call using onclick="toggleDragging();"

        function toggleDragging() {
            var $dragMe = $('#DragMe');
            var draggable = $dragMe.draggable('instance');
            if (draggable) {
                $dragMe.draggable('destroy');
            } else {
                $dragMe.draggable();
            }
        }

Note there is no issue for non-touchscreen. Best solution may be to use button above IFF TouchScreen and always enable draggable for other screens.

[Raymond-Naseef]

Hi All,

Hope this helps: I found method to allow having items inside a draggable container to retain scrolling on mobile and still allow for dragging. Check out https://jsfiddle.net/77e7ytwk/ to see it operating (this is using a CDN for touch-punch 0.2.3).

BTW, using DOM for add handlers for Touch events as I did not find handlers for this built into jQuery: let me know if you find that built-in (no plugins please, I know about them).

[karger]

I'm fighting this issue as well; we need to support touch-drag for selection but don't want to give up scrolling. I'm hacking my copy of duck-punch so that a long press triggers mouse emulation but a quick press followed by drag is ignored by duck punch, meaning the event is handled by the default scroll behavior.

It would be nice to have an option to enable or disable duck punch; that would make implementing this easier and I think it could be generally useful.

[Raymond-Naseef]

@karger This sounds like an interested way to handle 2 needs.

I am working with understanding "duck punch" = "touch-punch". I think the focus here is not on touch-punch, it is on draggable: that can be enabled/disabled - my JSFiddle should work if you use the correct events, making the element draggable using setTimeout(...) on touchstart, then disabling it on touchend() [and make sure to end setTimeout(...) in touchend() to make sure element is not draggable after touch finishes).

Should not be hard to code. I may have some time to play with this over the next few days if you want help.

[karger]

I agree that touch events with timeout can be used to multiplex the drag operation, and if I was starting from scratch that's how I'd do it.
Unfortunately, I'm working with old code that has already implemented a drag handler based on mouse events, and as with touch-punch I need a way to allow touch events to trigger this old mouse-based widget.

On 12/28/2016 11:42 PM, Raymond-Naseef wrote:

@karger https://github.com/karger This sounds like an interested way to handle 2 needs.

I am working with understanding "duck punch" = "touch-punch". I think the focus here is not on touch-punch, it is on draggable: that can be enabled/disabled - my JSFiddle https://jsfiddle.net/77e7ytwk/ should work if you use the correct events, making the element draggable using setTimeout(...) on touchstart, then disabling it on touchend() [and make sure to end setTimeout(...) in touchend() to make sure element is not draggable after touch finishes).

Should not be hard to code. I may have some time to play with this over the next few days if you want help.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/furf/jquery-ui-touch-punch/issues/270#issuecomment-269581195, or mute the thread https://github.com/notifications/unsubscribe-auth/ABFpXlVBThNjz-dk6vCMUcinrEC39_Jqks5rMzpLgaJpZM4J2qZ9.

[Raymond-Naseef]

What about using jquery to trigger event on the widget? Mouse event may be issue as they happen after touch events

[karger]

yes, that's what i'm doing. setting a timeout to detect a long press and, when it occurs, using touch-punch to trigger suitable mouse events. but it's a bit awkward given the structure of touch-punch.

On 12/29/2016 12:51 AM, Raymond-Naseef wrote:

What about using jquery to trigger event on the widget? Mouse event may be issue as they happen after touch events

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/furf/jquery-ui-touch-punch/issues/270#issuecomment-269585129, or mute the thread https://github.com/notifications/unsubscribe-auth/ABFpXrfHttexPGXiGU3nDORk_eN050GIks5rM0pfgaJpZM4J2qZ9.

[Raymond-Naseef]

I think I misunderstood your original comment. It sounds like you have it working and are looking for new feature in touch-punch to simplify your code. If you have idea how to modify touch-punch, perhaps the author will accept it if you commit modified branch to github.