Is there a way to make to work the mootools class "Drag" on Safari mobile? Please don't link me to other frameworks.
3 Answers
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);
}
});
-
awesome, +1 - if this has been tested in production and it works, why not mod the original classes and send a pull request to mootools-more instead? touch devices are far more widespread and this is useful to have out of the box. Commented Dec 24, 2011 at 17:46
-
Great!! do you know how to disable scrolling while the touch event is dragging? My window scrolls at same time as it drags...– SergioCommented May 27, 2013 at 20:55
-
Actually there is a problem due to an android bug, see uihacker.blogspot.it/2011/01/android-touchmove-event-bug.html and code.google.com/p/android/issues/detail?id=5491. Basically you need to call event.preventDefault() in the touchmove callback, then adjust things to correctly remove the event handler– abidiboCommented Apr 11, 2014 at 9:59
I've fixed it myself. It is as easy as maping the mouse events to touch events.
So the solution is to search & replace:
mousedown -> touchstart
mouseup -> touchend
mousemove -> touchmove
Could you try https://github.com/kamicane/mootools-touch ?
-
It's for mootools 1.2 and I'm using 1.3. Also I'm using many components based on the native Drag class, so I prefer a fix for that class. Thanks!– aartilesCommented Sep 29, 2011 at 9:47