type
status
date
slug
summary
tags
category
icon
password
Edited
Sep 24, 2022 01:54 AM
Created
Sep 24, 2022 01:23 AM
方式
我们需要知道鼠标的三个事件,分别是
mousedown
,mousemove
,mouseup
,当点击按下的时候,克隆一个绝对定位的元素,并标识下"拖拽中"的状态,接着在 mousemove
中就可以判断应该执行的具体方法,从而让元素随着鼠标移动起来。在监听事件的
event
对象中,有几个参数是比较重要的:clientX
,clientY
标识的鼠标当前横坐标和纵坐标,offsetX
和 offsetY
表示相对偏移量,可以在 mousedown
鼠标按下时记录初始坐标,在 mouseup
鼠标抬起时判断是否在目标区域中,如果是则用鼠标获取到的当前的偏移量 - 初始坐标得到元素实际在目标区域中的位置。页面
样式:
JS
参考链接:
- 作者:JinSo
- 链接:https://jinso365.top/article/write-drag-drop
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。