在移动设备上使用 mootool 拖动

2023-11-22

有没有办法让 mootools 类“Drag”在 Safari 移动设备上工作? 请不要将我链接到其他框架。


这是我使 Mootools Drag 支持触摸事件的解决方案。此方法不需要我编辑 mootools more 文件,因为我使用了 Class.refactor (仅使用 Mootools v.1.3.1 进行了测试)——它也不会破坏通常的点击事件

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);
        }
    });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在移动设备上使用 mootool 拖动 的相关文章