在mootools拖动上分离触摸和滚动
separate touch and scroll on mootools drag
我有一个在台式电脑上运行良好的mootools拖动窗口,我找到了这个关于如何使mootools拖动支持触摸事件的答案。
当我在移动设备(IOS)上拖动时,应用了Class.refactor
,也触发了滚动事件。因此,可拖动窗口移动的同时,屏幕滚动。
问题:当拖动事件"移动"时,是否有一种方法可以禁用/暂停滚动?或者当鼠标/触摸在拖动div区域内时?
和我的代码(与mootools 1.3.2)
答:
document.getElement('.dragme').ontouchmove = function() {event.preventDefault();}
(在下面的答案中解释)
<div class="container">
<div class="dragme">drag me</div>
</div>
JS:
Class.refactor(Drag.Move,
{
attach: function(){
this.handles.addEvent('touchstart', this.bound.start);
return this.previous.apply(this, arguments);
},
detach: function(){
this.handles.removeEvent('touchstart', this.bound.start);
return this.previous.apply(this, arguments);
},
start: function(event){
document.body.addEvents({
touchmove: this.bound.check,
touchend: this.bound.cancel
});
this.previous.apply(this, arguments);
},
check: function(event){
if (this.options.preventDefault) event.preventDefault();
var distance = Math.round(Math.sqrt(Math.pow(event.page.x - this.mouse.start.x, 2) + Math.pow(event.page.y - this.mouse.start.y, 2)));
if (distance > this.options.snap){
this.cancel();
this.document.addEvents({
mousemove: this.bound.drag,
mouseup: this.bound.stop
});
document.body.addEvents({
touchmove: this.bound.drag,
touchend: this.bound.stop
});
this.fireEvent('start', [this.element, event]).fireEvent('snap', this.element);
}
},
cancel: function(event){
document.body.removeEvents({
touchmove: this.bound.check,
touchend: this.bound.cancel
});
return this.previous.apply(this, arguments);
},
stop: function(event){
document.body.removeEvents({
touchmove: this.bound.drag,
touchend: this.bound.stop
});
return this.previous.apply(this, arguments);
}
});
new Drag.Move(document.getElement('div.container'), {
handle: document.getElement('.dragme'),
modifiers: {
x: 'margin-left',
y: 'margin-top'
}
});
为onTouchMove
添加一个事件处理程序,它只做event.preventDefault
-它应该停止滚动/缩放/捏东西。你可以在你的this.bound
回调中添加它并附加到文档中。
相关文章:
- 谷歌地图劫持了iphone's滚动(触摸事件)-如何恢复
- 如何检测滚动事件是否像在触摸设备上一样只触发一次
- Sencha触摸:工具栏无法正常滚动
- jQuery触摸滑动内容滚动功能
- 停止触摸滚动还可以防止单击链接
- 移动/触摸屏幕 - 滑动时水平滚动
- 允许在隐藏溢出的情况下进行触摸滚动
- 整页.js触摸滚动固定元素
- 检测触摸向上或向下滚动
- 移动HTML:触摸结束后继续滚动
- JS中的触摸板滚动检测,没有库
- 一页滚动iPad触摸滚动
- 在模式打开时禁用触摸滚动
- 在带有溢出的框中没有通过触摸滚动:在可拖动框中滚动/自动
- Sencha Touch和Clusterize.js,向下传递触摸滚动事件
- 取消IE9触摸滚动事件并调用鼠标移动(可能)
- Angular JS禁用触摸滚动,除了某些元素
- 当在文本字段之间选择时,Sencha触摸滚动问题
- 每次用户触摸滚动到40px时触发事件
- Firefox触摸滚动不工作