有没有办法让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