abidibo.net

Just Open Source

Drag and drop touch compatible with mootools

drag&drop javascript mobile mootools

You can also be interested in:

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);
    }
});

Subscribe to abidibo.net!

If you want to stay up to date with new contents published on this blog, then just enter your email address, and you will receive blog updates! You can set you preferences and decide to receive emails only when articles are posted regarding a precise topic.

I promise, you'll never receive spam or advertising of any kind from this subscription, just content updates.

* indicates required

abidibo.net topics

Comments are welcome!

blog comments powered by Disqus

Your Smartwatch Loves Tasker!

Your Smartwatch Loves Tasker!

Now available for purchase!

Featured