在移动设备上使用 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);
        }
    });

这篇关于在移动设备上使用 mootools 拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！