Geek Answers Handbook

Scrolling through jQuery UI Draggable and jQuery Touch Punch on iPad doesn't work properly

See jsfiddle below:

jsfiddle

When viewing this on a desktop scrolling, the desktop works as I expect. You can use the scroll bars to scroll through the list, and you can click and drag the fields without scrolling through the list.

My problems arise when I try to scroll this list on the iPad. Every time you touch a window in a list, it is already set to drag and drop, so you cannot scroll through the list and just drag one of them.

Does anyone have any suggestions on how I can make this work? Maybe an alternative solution?

Thanks in advance.

HTML:

<div id="scroller"> <div class="color" style="background-color: rgb(107, 163, 93);" data-r="107" data-g="163" data-b="93"></div> <div class="color" style="background-color: rgb(107, 163, 93);" data-r="107" data-g="163" data-b="93"></div> <div class="color" style="background-color: rgb(107, 163, 93);" data-r="107" data-g="163" data-b="93"></div> <div class="color" style="background-color: rgb(107, 163, 93);" data-r="107" data-g="163" data-b="93"></div> <div class="color" style="background-color: rgb(107, 163, 93);" data-r="107" data-g="163" data-b="93"></div> <div class="color" style="background-color: rgb(107, 163, 93);" data-r="107" data-g="163" data-b="93"></div> <div class="color" style="background-color: rgb(107, 163, 93);" data-r="107" data-g="163" data-b="93"></div> <div class="color" style="background-color: rgb(107, 163, 93);" data-r="107" data-g="163" data-b="93"></div> <div class="color" style="background-color: rgb(107, 163, 93);" data-r="107" data-g="163" data-b="93"></div> <div class="color" style="background-color: rgb(107, 163, 93);" data-r="107" data-g="163" data-b="93"></div> <div class="color" style="background-color: rgb(107, 163, 93);" data-r="107" data-g="163" data-b="93"></div> <div class="color" style="background-color: rgb(107, 163, 93);" data-r="107" data-g="163" data-b="93"></div> </div>

CSS

 #scroller { width: 317px; height: 325px; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .color { margin:5px; width: 100px; height: 100px; }

JS:

 $(".color").draggable({ scroll: false, helper: "clone", });
+4
source share
1 answer

As I cannot add a comment, I hope you do not reduce me, as this is just a suggestion based on my own experience.

Try using https://github.com/furf/jquery-ui-touch-punch .
Some time ago I needed to create something like what you did and make it compatible with all mobile devices, and it really helped.

+1
source

More articles:


All Articles