🗒️手写JS拖拽(原生拖拽太拉跨)
00 分钟
2022-9-24
2022-9-24
type
status
date
slug
summary
tags
category
icon
password
Edited
Sep 24, 2022 01:54 AM
Created
Sep 24, 2022 01:23 AM

方式

我们需要知道鼠标的三个事件,分别是 mousedownmousemovemouseup ,当点击按下的时候,克隆一个绝对定位的元素,并标识下"拖拽中"的状态,接着在 mousemove 中就可以判断应该执行的具体方法,从而让元素随着鼠标移动起来。
在监听事件的 event 对象中,有几个参数是比较重要的:clientXclientY 标识的鼠标当前横坐标和纵坐标,offsetXoffsetY 表示相对偏移量,可以在 mousedown 鼠标按下时记录初始坐标,在 mouseup 鼠标抬起时判断是否在目标区域中,如果是则用鼠标获取到的当前的偏移量 - 初始坐标得到元素实际在目标区域中的位置。

页面

样式:

JS

 

参考链接:
  1. 原生拖拽太拉跨了,纯JS自己手写一个拖拽效果,纵享丝滑 - 掘金 (juejin.cn)
 
上一篇
🔥 连八股文都不懂还指望在前端混下去么
下一篇
HTML Drag & Drop API 指南

评论
Loading...