手写JS拖拽（原生拖拽太拉跨）
category
Web
date
Sep 24, 2022
icon
slug
write-drag-drop
status
Published
summary
tags
JavaScript
type
Post
方式
我们需要知道鼠标的三个事件，分别是
mousedown，mousemove，mouseup ，当点击按下的时候，克隆一个绝对定位的元素，并标识下"拖拽中"的状态，接着在 mousemove 中就可以判断应该执行的具体方法，从而让元素随着鼠标移动起来。在监听事件的
event 对象中，有几个参数是比较重要的：clientX，clientY 标识的鼠标当前横坐标和纵坐标，offsetX 和 offsetY 表示相对偏移量，可以在 mousedown 鼠标按下时记录初始坐标，在 mouseup 鼠标抬起时判断是否在目标区域中，如果是则用鼠标获取到的当前的偏移量 - 初始坐标得到元素实际在目标区域中的位置。页面
样式：
JS
参考链接：