可拖动正在阻止触摸事件答案

【问题标题】：Draggable is blocking touch event可拖动正在阻止触摸事件
【发布时间】：2013-10-09 22:16:35
【问题描述】：

我正在尝试使用拖动来来回移动 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/

【问题讨论】：

标签： javascript jquery jquery-ui touch draggable

【解决方案1】：

我遇到了完全相同的问题，经过大量谷歌搜索后，我在这里找到了解决方案：

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

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

编辑我将根据 Chris 的 cmets 在此处包含我的解决方案的详细信息。我为这两个功能替换了触摸打孔插件：

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函数。

【讨论】：

【解决方案2】：

你试过了吗？

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

我已使用上述方法来防止使用触摸在 Web 应用上进行整体滚动。

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

【讨论】：