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...

score 4 · Answer 1 · edited Oct 23 '13 at 12:20

4

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/

edited Oct 23 '13 at 12:20

Jo VdB

2,016
18
16

answered Aug 16 '12 at 13:08

Gil Zumbrunnen

1,062
6
17

thanks for your answer... i tried to make just a inside the
element draggable, but that is not the desired UI design. the whole
should be draggable and scrollable....

tmaximini

Aug 16 '12 at 14:08

Is your ul tag using 100% of the width of your iPad ? How about using something similar to what they did on the .slider() demo page here : http://jqueryui.com/demos/slider/#side-scroll This simple scrollbar example could be a neat workaround. Another workaround is to add a button to make the whole thing draggable or not, but again it depends on what your app is supposed to do... – Gil Zumbrunnen Aug 16 '12 at 14:14

nah, it only like 20% of the landcscape view. there are 2 scrollable lists with drag elements and 60% width canvas drop zone more or less – tmaximini Aug 17 '12 at 08:26

score 3 · Accepted Answer · edited May 23 '17 at 12:00

3

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/

edited May 23 '17 at 12:00

Community

1
1

answered Aug 17 '12 at 09:18

tmaximini

8,403
6
47
69

I found that if you wrap the event.preventDefault() in an if statement that only causes it to fire on mousemove then it prevents any issues with the blocking of other event types. – notreadbyhumans Oct 20 '12 at 14:12
Could you post a jsfiddle example of your working javascript please? It is not clear what modifications need to be done. – Aymeric Gaurat-Apelli Oct 23 '12 at 04:49
added a fiddle of my solution – tmaximini Oct 23 '12 at 08:48
1

I opened the jsfiddle in an iPhone, and zoomed in so the "Element 1" divs are off the top and bottom of the page, to test scrolling. I find that touching an element and scrolling doesn't scroll - it moves the element. I may have misunderstood, but I thought the idea was to allow scrolling when touching draggable divs, and only drag if the divs are touched for a period of time. – Shaun Apr 13 '14 at 04:38
Additionally you might want to prevent the ui-sortable from scrolling while dragging, e.g. by adding a css class when dragging. – Felix Oct 13 '15 at 12:36

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

2 Answers2

Linked