Geek Answers Handbook

Drag and Drop on iPad Web App - While Keeping Scrolling Functionality

I am using JQuery UI Drag and Drop ( http://jqueryui.com/demos/draggable ) along with https://github.com/furf/jquery-ui-touch-punch to display mouse touch events. So far, all drag and drop works great.

Now I have a problem with a long list of draggable items, and I also need to scroll the list on the iPad ... When I created the items in the draggable list, this will no longer work.

I tried using jqueryui, provided constraints such as distance and delay - but even then the scroll event seems to be completely disabled / imposed using the drag event.

I probably need to write a custom function like "only if moving to the left for at least 50 pixels causes it to drag" or something like that.

Has anyone ever encountered a similar problem and is ready to share their thoughts with him? Are there any other mobile web frames such as Sencha or JQmobile equipped with such features?

Thanks in advance...

+7
source share
2 answers

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, I needed to adjust to remove event.preventDefault(); to turn scolling back on.

Edit

I mostly used the code from the second answer related to some settings. Here is the JS script of my solution, hope this helps: http://jsfiddle.net/LQuyr/8/

+3
source

It depends on your design, but you can try using pens.

Here is an example jQuery UI documentation:

 <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 canceling an option can give you a start.

http://jsfiddle.net/Dn9DX/

+4
source

More articles:


All Articles