Drag & Drop on IPad Web App - while remaining Scroll functionality

Question

I am using Jquery UI Drag and Drop ( http://jqueryui.com/demos/draggable ) together with https://github.com/furf/jquery-ui-touch-punch to map touch events over to mouse events. The whole drag and drop thing works fine so far.

The problem I have now is that I have a long list of draggable elements and I need to be able to scroll through the list on IPad as well... When I made the list elements draggable this won't work anymore.

I tried using the jqueryui provided constraints like distance and delay - but even then the scroll event seems to be totally disabled / overlayed with the drag event.

I probably need to write a custom function like "only if move to left at least 50 px make it draggable" or something.

Has anybody ever encountered a similar problem and is willing to share som thoughts about it? Are any other mobile web frameworks like Sencha or JQmobile equipped with such functionality?

Thanks in advance...

Answer 1

It depends on your design of course, but you could try using handles.

Here is jQuery UI's documentation example :

<div id="draggable" class="ui-widget-content">
    <p class="ui-widget-header">drag with handle</p>
</div>
<div id="draggable2" class="ui-widget-content">
    <p>drag from content</p>
    <p class="ui-widget-header">not drag with handle</p>
</div>

$("#draggable").draggable({handle:"p"});
$("#draggable2").draggable({cancel:"p.ui-widget-header"});

Or at least the option cancel could give you a start.

http://jsfiddle.net/Dn9DX/

Answer 2

I solved this by switching from https://github.com/furf/jquery-ui-touch-punch to the code in this solution: Javascript Drag and drop for touch devices.

In the end all I needed to adjust was to remove the event.preventDefault(); to re-enable scolling.

Edit

Basically I used the code from the second answer I linked - with some adjustments. Here is the JS fiddle of my solution, hope it helps: http://jsfiddle.net/LQuyr/8/