Javascript 在移动设备上使用mootools进行拖动

Javascript 在移动设备上使用mootools进行拖动,javascript,drag-and-drop,mobile-safari,dom-events,mootools,Javascript,Drag And Drop,Mobile Safari,Dom Events,Mootools,有没有办法让mootools类在Safari mobile上“拖动”工作? 请不要将我链接到其他框架。你能试试吗?我自己已经修好了。它与将鼠标事件映射到触摸事件一样简单 因此,解决方案是搜索和替换: mousedown -> touchstart mouseup -> touchend mousemove -> touchmove 这是我制作Mootools拖拽支持触摸事件的解决方案。这个方法不需要我编辑mootools more文件,因为我使用了Class.refactor

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

你能试试吗?

我自己已经修好了。它与将鼠标事件映射到触摸事件一样简单

因此,解决方案是搜索和替换:

mousedown -> touchstart
mouseup -> touchend
mousemove -> touchmove

这是我制作Mootools拖拽支持触摸事件的解决方案。这个方法不需要我编辑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);
        }
    });

它适用于mootools 1.2,我使用的是1.3。此外,我使用了许多基于本机Drag类的组件,因此我更喜欢该类的修复。谢谢太棒了,+1-如果这已经在生产环境中测试过并且可以使用,为什么不修改原始类并向mootools more发送一个pull请求呢?触摸设备更广泛,这是有用的,有现成的。太好了!!您知道如何在拖动触摸事件时禁用滚动吗?我的窗口在拖动的同时滚动…实际上,由于android错误,出现了一个问题,请参阅和。基本上,您需要在touchmove回调中调用event.preventDefault(),然后进行调整以正确删除事件处理程序