8

Is there a way to make to work the mootools class "Drag" on Safari mobile? Please don't link me to other frameworks.

Improve this question

3 Answers 3

Reset to default
10

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);
        }
    });
Improve this answer
3
  • 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.
    – Dimitar Christoff
    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...
    – Sergio
    Commented 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
    – abidibo
    Commented Apr 11, 2014 at 9:59
2

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
Improve this answer
0

Could you try https://github.com/kamicane/mootools-touch ?

Improve this answer
1
  • 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!
    – aartiles
    Commented Sep 29, 2011 at 9:47

Not the answer you're looking for? Browse other questions tagged or ask your own question.