JavaScript-Draggable阻止了触摸事件

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

我的希望是防止在垂直触摸交互过程中拖动,但是UI拖动方法仍然会触发并覆盖触摸事件.我正在使用触摸打孔插件在触摸设备上进行可拖动的工作,因此可能其中的某些情况使情况变得更加复杂.如果可以阻止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/

解决方法:

我遇到了完全相同的问题,经过大量的搜寻之后,我在这里找到了解决方案：

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

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

编辑根据克里斯的评论,我将在此处包括我的解决方案的详细信息.我为以下两个功能替换了触控打孔插件：

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

标签：jquery-ui,touch,draggable,javascript,jquery
来源： https://codeday.me/bug/20191122/2061471.html