是否有办法在Safari移动版上使用mootools类“ Drag”?请不要将我链接到其他框架。
这是我使Mootools Drag支持触摸事件的解决方案。该方法不需要我编辑mootools更多文件,因为我使用了Class.refactor(仅使用Mootools v.1.3.1进行了测试),它也不会破坏常规的点击事件
Class.refactor(Drag,
{
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);
}
});
我已自行修复。就像将鼠标事件映射到触摸事件一样简单。
所以解决方案是搜索并替换:
mousedown -> touchstart
mouseup -> touchend
mousemove -> touchmove