Draggable está bloqueando o evento de toque
Eu estou tentando usar arrastar para mover um div e para trás. Esta parte funciona bem até que o div tenha conteúdo rolável. Isso não é um problema em uma área de trabalho devido à barra de rolagem, mas ocorre um problema nos dispositivos de toque. Como o evento de toque está em conflito com o evento de arrastar, não consigo rolar o conteúdo. Tentei criar uma condição para detectar se o arrasto era mais horizontal que vertical.
Minha esperança era evitar o arrastamento durante uma interação de toque vertical, mas o método de arrastar da interface do usuário ainda dispara e substitui o evento de toque. Eu estou usando o plug-in touch-punch para fazer o trabalho arrastável em dispositivos de toque, então talvez algo aí tenha complicado a situação. Seria ótimo se eu pudesse evitar que o método de arrastar da interface do usuário fosse disparado completamente até que a condição de arrasto horizontal fosse atendida. Eu acho que isso eliminaria a interferência.
// 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;
}
}
}
Aqui está um violino para demonstrar o problema (teste no dispositivo de toque):http://jsfiddle.net/jTMxS/2/