星火编辑器背包或属性栏拖拽功能的一种实现如下:
本文主要介绍滚动条不适合手机的情况下,如何通过手势操纵面板上下滑动效果。
主要思路:监听了鼠标按下与松开事件,然后起一个计时器在两个事件之间记录鼠标的坐标移动,内容面板做同步移动。
一,在你的需要显示的控件(即显示窗口)内起一个鼠标按下事件
见图一,图二
这个事件主要调用了两个函数,下面会有函数的具体实现
feat check mouse
第一个函数的作用是记录和计算鼠标位置,让面板做同样移动。所以这个函数要起一个计时器定时启动。 0.03s大概是33帧,足够使用。
feat set ticker mouse
这个是把计时器存到客户端变量里,用于后续清理。
二 当feat check mouse(图三)执行时,对比你的鼠标移动距离,这里要有一个变量,point mouse old,用于记录之前的鼠标位置。
特别的,在这个函数第一次调用时,old为空,需要进行初始化,并且不需要移动。
函数中,额外记录了两个客户端全局变量,panel move (你的内容控件),panel move father (你的窗口控件),初始化的时候存进去,清理的时候需要用到。
三 鼠标松开时,结束计时器任务,清理缓存然后恢复一些异常状态。见图四
这里恢复异常状态,是当你把窗口拖得过高或者过低的时候需要给你弹回来。
演示效果视频手机编辑无法上传,之后会补上。
这段逻辑是用向日葵远程写的,有些地方不够干净,大家见谅。
以上就是星火编辑器背包或属性栏拖拽功能的一种实现相关内容。