在移动设备上使用 mootools 拖动
有没有办法让 mootools 类拖动"在 Safari 移动设备上工作?请不要将我链接到其他框架.
Is there a way to make to work the mootools class "Drag" on Safari mobile? Please don't link me to other frameworks.
推荐答案
这是我让 Mootools Drag 支持触摸事件的解决方案.这种方法不需要我编辑 mootools 更多文件,因为我使用了 Class.refactor(仅使用 Mootools v.1.3.1 测试过)——它也不会破坏通常的点击事件
Here was my solution to making Mootools Drag support touch events. This method didn't require me to edit the mootools more file since i used Class.refactor (This is only tested with Mootools v.1.3.1) -- it also does not break the usual click events
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);
}
});
相关文章