有沒有辦法讓safari移動設備上的mootools類「拖動」? 請不要將我鏈接到其他框架。使用移動設備上的Mootools拖動
回答
我自己修復了它。這與將鼠標事件映射爲觸摸事件一樣簡單。
因此,解決辦法是尋找&替換:
mousedown -> touchstart
mouseup -> touchend
mousemove -> touchmove
這裏是我的解決方案,使MooTools的拖放支持觸摸事件。這種方法並不需要我來編輯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);
}
});
awesome,+1 - 如果這已經在生產環境中測試過並且可行,那麼爲什麼不修改原始類並向mootools發送拉請求 - 更多呢?觸摸設備更爲廣泛,這對於開箱即用非常有用。 –
太棒了!你知道如何在觸摸事件拖動時禁用滾動嗎?我的窗口在拖動時同時滾動... – Sergio
實際上,由於Android錯誤,存在問題,請參閱http://uihacker.blogspot.it/2011/01/android-touchmove-event-bug.html和http :?//code.google.com/p/android/issues/detail ID = 5491。基本上你需要在touchmove回調中調用event.preventDefault(),然後調整事件以正確地移除事件處理程序 – abidibo
- 1. 使用javascript在移動設備上平滑拖動圖像
- 2. 移動設備上的StageVideo
- 3. 移動設備上的JqGrid
- 4. 在可移動設備/可移動存儲上使用FolderBrowserDialog
- 5. 移動設備上的側滾動
- 6. 在移動設備上
- 7. 禁用移動設備上的鏈接
- 8. jquery mobile在移動設備上滑動
- 9. javascript + html5 canvas:繪圖而不是在移動設備上拖動/滾動?
- 10. 停止元素在移動設備上被拖出屏幕
- 11. 在移動設備上禁用Fluidbox.js?
- 12. 使用Nmap的移動設備識別
- 13. 使用iPhone的移動設備管理
- 14. 發現使用wifi的移動設備
- 15. 拖動圖像設備
- 16. 如何讓我的網站不會在移動設備上拖動?
- 17. 使用CSS/JS在移動設備上創建滑動效果
- 18. 從移動網站訪問移動設備上的GPS和相機設備
- 19. 使用Mootools的拖放添加可拖動元素
- 20. Unity設備移動
- 21. Flex移動設備上的數據格
- 22. Google移動設備上的AdSense
- 23. 移動設備上的jquery .appendTo()
- 24. 移動設備上的超大圖像
- 25. 移動設備上的觸摸輸入
- 26. CSS。移動設備上的中心塊
- 27. 移動設備上的共享存儲
- 28. 移動設備上的Response.Redirect錯誤
- 29. 移動設備上的外部C#庫
- 30. 移動設備上的TLFTextField(ios/android)
這是對於mootools 1.2和我正在使用1.3。此外,我使用基於本機Drag類的許多組件,所以我更喜歡該類的修復。謝謝! – aartiles