在移动设备上使用 mootools 拖动答案

【问题标题】：Drag with mootools on mobile在移动设备上使用 mootools 拖动
【发布时间】：2011-09-28 19:33:38
【问题描述】：

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

【问题讨论】：

标签： javascript drag-and-drop mobile-safari dom-events mootools

【解决方案1】：

这是我制作 Mootools Drag 支持触摸事件的解决方案。此方法不需要我编辑 mootools 更多文件，因为我使用了 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);
        }
    });

【讨论】：

太棒了，+1 - 如果这已经在生产中测试并且有效，为什么不修改原始类并向 mootools-more 发送拉取请求呢？触控设备的使用范围更为广泛，开箱即用非常有用。
太棒了！！你知道如何在触摸事件拖动时禁用滚动吗？我的窗口在拖动的同时滚动...
其实是一个android的bug导致的，见uihacker.blogspot.it/2011/01/android-touchmove-event-bug.html和code.google.com/p/android/issues/detail?id=5491。基本上你需要在 touchmove 回调中调用 event.preventDefault() ，然后进行调整以正确删除事件处理程序

【解决方案2】：

我自己修好了。就像将鼠标事件映射到触摸事件一样简单。

所以解决方法是搜索和替换：

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

【讨论】：

【解决方案3】：

你可以试试https://github.com/kamicane/mootools-touch 吗？

【讨论】：

它适用于 mootools 1.2，我使用的是 1.3。此外，我使用了许多基于原生 Drag 类的组件，所以我更喜欢对该类进行修复。谢谢！