Drag and drop is a nice feature which often can increase the usability of our web applications. Mootools has a good support for drag and drop in the more package, which actually works well for desktop environments.

But unfortunately we are in 2014, and now targeting our apps for desktop only is something which should be avoided except if we are sure no one will use them with mobile or tablets.

So the problem is, how to extend the drag functionality to mobile devices?

StackOverflow is always good, and you may find an answer here, but actually the piece of code you will find (which requires Class.refactor) needs some hack to face an android bug and work well both in android and ios.

So here comes the hacked (bold lines) code, enjoy it and take a look at this demo.

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.touchmoveCheck = function(event) {event.preventDefault(); this.bound.check(event); }.bind(this),
            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.touchmoveCheck,
            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);
    }
});