可拖动阻止了触摸事件 [英] Draggable is blocking touch event

问题描述

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

I'm attempting to use drag to move a div back and forth. This part works fine until the div has scrollable content. This isn't a problem on a desktop because of the scrollbar, but a problem occurs on touch devices. Because the touch event is conflicting with the drag event, I'm unable to scroll the content. I tried to create a condition to detect if the drag was more horizontal than vertical..

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

My hope was to prevent the dragging during a vertical touch interaction, but the UI drag method still fires and overrides the touch event. I'm using the touch-punch plugin to make the draggable work on touch devices, so maybe something in there has complicated the situation. It would be great if I could prevent the UI drag method from firing altogether until the horizontal drag condition is met. I think this would 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;
          }
        }
      }

以下是用来演示该问题的小提琴(在触摸设备上进行测试): http://jsfiddle.net/jTMxS/2/

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

推荐答案

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

I had the exact same problem and after a lot of googling I found a solution in here:

拖放放到iPad Web App上-保留滚动功能

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

so have a look at the correct answer there and at the piece of code they mentioned (which is actually in other questions). I did remove the event.preventDefault() line because in my case I didn't want to lose the scrolling behavior. Hope this helps.

编辑，根据克里斯的评论，我将在此处提供解决方案的详细信息.我将触摸打孔插件替换为以下两个功能:

EDIT I'll include here the details of my solution, as per Chris' 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);
};

准备好文档后，必须调用init函数.

The init function needs to be called when the document ready.

这篇关于可拖动阻止了触摸事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！