#青训营笔记创作活动# 12.8 day1 JS实现拖拽鼠标的三个事件,分别是 mousedown,mousemove,mouseup

event 对象中clientX,clientY 标识的鼠标当前横坐标和纵坐标,offsetX 和 offsetY 表示相对偏移量

mousedown 时记录初始坐标,在 mouseup 鼠标抬起时判断是否在目标区域

CSS方面:
滤镜 filter: brightness(90%); 调节明亮度可以快速实现一个鼠标覆盖的动态效果
伪类激活 cursor 的 grab 和 grabbing
可以设置抓取动作鼠标按下时克隆按下的元素,并把克隆出来的元素设置成绝对定位

JS 监听 mousemove 并设置 e.clientX - initial.offsetX ,克隆出来的就会跟着鼠标位移了

判断是否在画布内抬起 —— 画布上绑定mouseup

性能:
降低回流重绘的成本,最好将多个操作合并起来处理

提前加载图片资源
展开
评论