Draggable блокирует событие касания

Question

Я пытаюсь использовать drag для перемещения div назад и вперед. Эта часть работает нормально, пока у div нет прокручиваемого содержимого. Это не проблема на рабочем столе из-за полосы прокрутки, но проблема возникает на сенсорных устройствах. Поскольку событие touch конфликтует с событием перетаскивания, я не могу прокручивать содержимое. Я попытался создать условие, чтобы определить, было ли сопротивление более горизонтальным, чем вертикальное.

Моя надежда состояла в том, чтобы предотвратить перетаскивание во время взаимодействия с вертикальным касанием, но метод перетаскивания пользовательского интерфейса все еще срабатывает и переопределяет событие касания. Я использую плагин touch-punch, чтобы сделать перетаскиваемую работу на сенсорных устройствах, поэтому, возможно, что-то там осложнило ситуацию. Было бы здорово, если бы я мог предотвратить перетаскивание метода пользовательского интерфейса, пока не будет выполнено условие горизонтального перетаскивания. Я думаю, это устранит вмешательство.

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

У меня была точно такая же проблема, и после того, как много выпучив я нашел решение в здесь:

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

так взглянуть на правильный ответ там и на кусок кода, они упоминалось (что на самом деле в другом вопросе). Я удалил строку event.preventDefault(), потому что в моем случае я не хотел потерять поведение прокрутки. Надеюсь это поможет.

EDIT Я расскажу о деталях моего решения, согласно комментариям Криса. Я заменил сенсорный удар плагин для этих двух функций:

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

Я использовал выше, чтобы предотвратить прокрутку в веб-приложении, используя сенсорный интерфейс.

Или вы могли бы связать перетащить на другой жест, как два пальца и т.д., используя Kuo.js, hammer.js и т.д.