Javascript Draggable正在阻止触摸事件

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

我的希望是在垂直触摸交互期间防止拖动，但是UI拖动方法仍然触发并覆盖触摸事件。我正在使用touch punch插件在触摸设备上运行Dragable，所以可能有什么东西让情况变得复杂了。如果我能阻止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;
          }
        }
      }

//注意拖动函数中的条件
开始：功能（e）{
//获取拖动的起点
startDragX=e.pageX；
startDragY=e.pageY；
},
拖动：函数（e、ui）{
//防止拖动，直到用户水平移动30px
如果（数学绝对值（e.pageX-startDragX）<30）{
ui.position.left=0；
}否则{
如果（ui.position.left<0）{
//左阻力
ui.position.left=ui.position.left+30；
}否则{
//右阻力
ui.position.left=ui.position.left-30；
}
}
}

这里有一把小提琴来演示这个问题（在触摸设备上测试）：

你试过这个吗

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

我已经使用上述方法来防止使用touch在web应用程序上进行整体滚动

---

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

我遇到了完全相同的问题，在谷歌搜索了很多次后，我在这里找到了解决方案：

因此，请看一下正确答案和他们提到的代码片段（实际上是在其他问题中）。我确实删除了

事件.preventDefault（）

行，因为在我的例子中，我不想丢失滚动行为。希望这有帮助

编辑根据Chris的评论，我将在这里提供解决方案的详细信息。我为这两个功能更换了touch punch插件：

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

函数