立即注册 登录
彼岸网 返回首页

天香公主的个人空间 http://www.bian-wang.com/discuz/?10005 [收藏] [复制] [分享] [RSS] https://github.com/txgz999/discuz/wiki

日志

Discuz功能改进:支持在移动设备上设置DIY

热度 1已有 911 次阅读2018-11-12 11:39 PM |个人分类:Discuz

Discuz的很多网页上都有DIY区域供站长添加聚合网站内容的模块,特别是门户页和专题页没有固有内容其内容完全由DIY设定。但是设置这些模块却只能在电脑上完成,这是因为在手机和iPad上无法拖曳来选择适当的框架和模块。


本文讨论下如何在移动设备上支持这个功能。这个功能的拖曳效果并不依赖html5,而是完全基于对鼠标事件的处理,而移动设备上不产生鼠标事件,这是这个功能在移动设备上不工作的主要原因。在移动设备上产生的是触摸事件,所以我们要将对mousedown, mousemove, mouseup事件的处理转化成对touchstart, touchmove, touchend事件的处理。其次触摸事件和鼠标事件的属性不尽相同,原来用于处理鼠标事件的代码要能适用于触摸事件得先对相关事件的属性做个转化。

具体讲需要修改四个文件。

1。template/default/common/header_diy.htm
这个模板文件里提供各种供挑选的框架,我们需要在用户按上其中之一时和处理mousedown事件一样来处理touchstart事件,在这个事件的处理中启动框架的拖曳。将下面这段 改为
2。template/default/portal/portalcp_diy.htm
这个模板文件提供各种供挑选的模块。和1)一样,我们也要加上对touchstart事件的处理。将下面这句 改成
3。static/js/common_diy.js
(3a) 这个文件里有个Util.event函数,它的作用是对鼠标事件做个包装,以处理不同浏览器上鼠标事件属性的细微不同。我们在这里要对触摸事件加上鼠标事件的某些属性,这样才能让原来处理鼠标事件的代码能尽可能不经修改,直接用于处理触摸事件。在这个函数的最后一句 前加上 新添的代码给触摸事件加上了clientX和clientY属性,因为原来的代码用鼠标事件的clientX和clientY属性的值来判断鼠标的当前位置。但触摸事件里没这两个属性。其原因是我们可以用多个手指同时触摸,所以可以有多个触摸点。因而我们代之以第一个触摸点的clientX和clientY的值。另外原来的代码用鼠标事件的which属性来判断用户按的是鼠标上的哪个按钮,只有当按的是左按钮时才激发拖曳,那时which的值是1。而在触摸事件里which虽然存在但总是0,我们需要把它设为1。但是这是个只读属性无法人为将它改成1,所以我们引入了一个新属性which2来替代which。
(3b) 这个文件里有个Drag.toggleMenu函数是用来处理加到DIY区域上的模块的设置菜单的。其中下面这句 是使得当用户点击菜单外的区域时菜单会自动消失。但触摸移动设备时按触摸元素的不同常常不引发点击事件,所以我们要处理触摸事件,还要注意该处理只对触摸菜单外的元素才起作用。所以在上面这句后加上: (3c) 函数Drag.dragStart在拖曳开始时被调用。其中的下面这句 用Util.event.which来判别用户按下的鼠标按钮是否是左按钮的,只有在按下的是左按钮时才激发拖曳。鉴于我们在3a里改用了which2,所以这里要做相应的改动,把上面这句改为: (3d) 在Drag.dragStart函数的末尾处理了mousemove事件,让被拖曳的框架或模块随鼠标移动: 我们在它的后面要加上对应的对touchmove事件的处理: 另外在移动设备上用手指划动会造成页面滚动。而当我们在拖曳框架或模块时,需要页面静止。多出来的那句造成了这个效果:
(3e) 函数Drag.dragEnd在拖曳结束时被调用,其中的下面两句重置了对鼠标事件的处理: 我们在它们的后面加上对相应触摸事件的处理: (3f) 我们不光可以通过拖曳在DIY区域上添加新框架和模块,还可以拖曳已经在DIY区域里的模块,将它们放在新的位置。函数 initMoveableArea 里的下面两句就是在相应的鼠标事件里加上拖曳效应 我们在它们的后面加上相应的对触摸事件的处理:
4。static/js/portal_diy.js
(4a) 在函数 drag.createObj 里有一句关于按下的鼠标按钮的判断,和3a一样,我们将下面这句 改为 (4b) 在同一个函数的尾部有代码在鼠标事件加上拖曳效应, 我们在它们的后面加上对相应触摸事件的处理:
下载文件: http://www.bian-wang.com/discuz/data/userupload/10005/diy.zip (仅适用于DiscuzX 3.4 简体中文UTF-8版)

发表评论 评论 (1 个评论)

回复 carry0987 2018-12-1 12:12 PM
移動設備中的Diy還真難操作呢2333
果然還是滑鼠比較精準啊
我試試看加入到其他頁面~

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 立即注册

小黑屋|Archiver|彼岸网  

Powered by Discuz! X3.1 © 2001-2014 Comsenz Inc.
GMT-4, 2024-3-29 08:16 AM , Processed in 0.019487 second(s), 10 queries. ,ApcOn

返回顶部