最近做到的react项目就有一个拖拽的需求，然后大概搜索了一下，找到了star比较高的
react-dnd库，但是阅读react-dnd的官方文档还是有点难受的,因为概念性比较强，所以在介绍react-dnd之前我们来实现原生拖拽
原生实现拖拽
Mouse事件实现拖拽
在h5之前，原生实现拖拽是根据
Mouse事件来实现的，需要用到以下这三个事件mousedown,mouseup,mousemove
mousedown 事件在指针设备按钮按下时触发。
mouseup事件在指针设备按钮抬起时触发。
当指针设备( 通常指鼠标 )在元素上移动时, mousemove 事件被触发。
JavaScript三大家族
明白了上述????三个事件方法的作用以及
JavaScript三大家族，我们来实现个简单版的拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img id="ball" src="https://js.cx/clipart/ball.svg" alt="">
<script>
const ball=document.querySelector("#ball")
ball.onmousedown = function(event) {
let shiftX = event.clientX - ball.getBoundingClientRect().left;
let shiftY =
最低0.47元/天 解锁文章
412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
