可拖动阻止触摸事件

我试图用拖动来回移动一个div。 这部分工作正常，直到div具有可滚动的内容。 由于滚动条，这在桌面上不是问题，但触摸设备上会出现问题。 由于触摸事件与拖动事件冲突，我无法滚动内容。 我试图创建一个条件来检测拖动是否比垂直更水平..

我的希望是在垂直触摸交互期间阻止拖动，但UI拖动方法仍然会触发并覆盖触摸事件。 我正在使用touch-punch插件在触摸设备上进行可拖动的工作，所以可能在那里的某些事情使情况变得复杂。 如果我可以阻止UI拖动方法完全触发直到满足水平拖动条件，那将是很好的。 我认为这可以消除干扰。

// 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; } } } 

这是一个演示问题的小提琴（触摸设备上的测试）： http ： //jsfiddle.net/jTMxS/2/

Answer 1

我有完全相同的问题，经过大量的护目镜后，我在这里找到了一个解决方案：

在IPad Web App上拖放 – 同时保留Scrollfunction

所以看看那里的正确答案以及他们提到的那段代码（实际上是其他问题）。 我确实删除了event.preventDefault()行，因为在我的情况下我不想丢失滚动行为。 希望这可以帮助。

编辑我将在这里包括我的解决方案的细节，根据克里斯的评论。 我为这两个function替换了触摸打孔插件：

 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); }; 

文档就绪时需要调用init函数。

Answer 2

你试过这个吗？

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

我已经使用上面的内容来防止使用触摸在Web应用程序上进行整体滚动。

或者您可以使用Kuo.js，hammer.js等将拖动绑定到另一个手势，例如2个手指等。