Draggable blocks touch event

Question

I am trying to use drag to move a div back and forth. This part works fine as long as the div has no scrollable content. This is not a problem on the desktop due to the scroll bar, but the problem occurs on touch devices. Since the touch event conflicts with the drag event, I cannot scroll the contents. I tried to create a condition to determine if the resistance was more horizontal than vertical.

My hope was to prevent drag and drop while interacting with vertical touch, but the drag and drop method of the user interface still fires and overrides the touch event. I use the touch-punch plugin to do drag-and-drop work on touch devices, so maybe something out there complicated the situation. It would be great if I could prevent the user interface method from being dragged and dropped until the horizontal drag and drop condition is met. I think this will eliminate the interference.

// note the condition inside the drag function start: function(e){ // get starting point of the drag startDragX = e.pageX; startDragY = e.pageY; }, drag: function(e, ui){ // prevent drag until user has moved 30px horizontally if (Math.abs(e.pageX - startDragX) < 30){ ui.position.left = 0; } else { if (ui.position.left < 0) { // left drag ui.position.left = ui.position.left + 30; } else { // right drag ui.position.left = ui.position.left - 30; } } } 

Here is a fiddle demonstrating the problem (test on a touch device): http://jsfiddle.net/jTMxS/2/

Answer 1

I had exactly the same problem, and after a long search, I found a solution here:

Drag and Drop in iPad Web App, Leaving Scrolling Functionality

so look at the correct answer there and at the code snippet that they mentioned (which is actually in other questions). I deleted event.preventDefault() because in my case I did not want to lose the scroll. Hope this helps.

EDIT I will include here the details of my decision, according to Chris's comments. I replaced the Touch Punch plugin for these two functions:

 var init = function() { document.addEventListener('touchstart', handler, true); document.addEventListener('touchmove', handler, true); document.addEventListener('touchend', handler, true); document.addEventListener('touchcancel', handler, true); }; var handler = function(event) { var touch = event.changedTouches[0], simulatedEvent = document.createEvent('MouseEvent'); simulatedEvent.initMouseEvent( { touchstart: 'mousedown', touchmove: 'mousemove', touchend: 'mouseup' } [event.type], true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null); touch.target.dispatchEvent(simulatedEvent); }; 

The init function should be called when the document is ready.

Answer 2

Have you tried this?

 (element).ontouchstart = function(e){ e.preventDefault(); } 

I used the above to prevent the overall scrolling of the web application using touch.

Or you can snap the drag to another gesture, for example 2 fingers, etc. using Kuo.js, hammer.js, etc.