我正在尝试使用拖动来来回移动div。在div具有可滚动内容之前,这部分工作正常。由于滚动条,这在桌面上不是问题,但是在触摸设备上会出现问题。因为触摸事件与拖动事件冲突,所以我无法滚动内容。我试图创建一个条件来检测拖动是否比水平方向更垂直。
我的希望是防止在垂直触摸交互过程中拖动,但是UI拖动方法仍然会触发并覆盖触摸事件。我正在使用touch-punch插件在触摸设备上进行可拖动的工作,因此其中的某些情况可能会使情况变得复杂。如果可以阻止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
函数。