デスクトップコンピューターで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'
}
});