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…
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/