拖放是阻塞触摸事件
拖放是阻塞触摸事件
提问于 2013-10-09 22:16:35
我试图用拖动来来回移动一个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/
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-06-05 14:53:45
我也遇到了同样的问题，在谷歌上搜索了很多之后，我在这里找到了一个解决方案：
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函数。
Stack Overflow用户
发布于 2013-10-09 22:43:54
你试过这个吗？
(element).ontouchstart = function(e){
e.preventDefault();
}我已经使用上述方法来防止使用触摸的web应用程序的整体滚动。
或者，您可以将拖动绑定到另一个手势，如2指等使用Kuo.js、hammer.js等。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19283780
复制相关文章
相似问题
腾讯云开发者
