在mootools拖动上分离触摸和滚动

separate touch and scroll on mootools drag

本文关键字:触摸 滚动 分离 mootools 拖动      更新时间:2023-09-26

我有一个在台式电脑上运行良好的mootools拖动窗口,我找到了这个关于如何使mootools拖动支持触摸事件的答案。

当我在移动设备(IOS)上拖动时,应用了Class.refactor,也触发了滚动事件。因此,可拖动窗口移动的同时,屏幕滚动。

问题:当拖动事件"移动"时,是否有一种方法可以禁用/暂停滚动?或者当鼠标/触摸在拖动div区域内时?

和我的代码(与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'
}
});

onTouchMove添加一个事件处理程序,它只做event.preventDefault -它应该停止滚动/缩放/捏东西。你可以在你的this.bound回调中添加它并附加到文档中。