mootools 拖动上的单独触摸和滚动答案

【问题标题】：separate touch and scroll on mootools dragmootools 拖动上的单独触摸和滚动
【发布时间】：2013-05-28 05:18:01
【问题描述】：

我有一个在台式计算机上运行良好的 mootools 拖动窗口，我发现 this 回答了有关如何使 mootools 拖动支持触摸事件的答案。

当我在移动设备 (IOS) 上拖动时，应用了 Class.refactor，滚动事件也会被触发。所以可拖动窗口移动，屏幕同时滚动。

问题：有没有办法在拖动事件“移动”时禁用/暂停滚动？或者当鼠标/触摸在拖动 div 区域内时？

小提琴示例here

还有我的代码（使用 mootools 1.3.2）

答案：
document.getElement('.dragme').ontouchmove = function() {event.preventDefault();}（在下面的答案中解释）

html:

<div class="container">
<div class="dragme">drag me</div>
</div>

JS：

Class.refactor(Drag.Move,
{
    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);
    }
});
new Drag.Move(document.getElement('div.container'), {
handle: document.getElement('.dragme'),
modifiers: {
    x: 'margin-left',
    y: 'margin-top'
}
});

【问题讨论】：

您是否尝试过在 touchmove 上通过event.preventDefault 停止活动？
不，还没有。谢谢。将检查...
您应该查看Mootools Powertools - 它添加了完整的移动和触控支持。
知道了！添加了document.getElement('.dragme').ontouchmove = function() {event.preventDefault();}，它可以工作了！ @DimitarChristoff，您可以发布您的建议作为答案吗？所以我接受了。

标签： javascript mobile drag-and-drop touch mootools

【解决方案1】：

为onTouchMove 添加一个除了event.preventDefault 之外什么都不做的事件处理程序 - 它应该停止滚动/缩放/捏合的东西。您可以在 this.bound 回调中添加它并附加到 document.body 或实际的可拖动元素上。

【讨论】：