酷炫的拖拽效果怎么实现？
开源
个人开源的leno-admin后台管理项目，前端技术栈：reactHooks、ant-design；后端技术栈：koa、mysql、redis，整个项目包含web端、electron客户端、mob移动端、template基础模板，能够满足你快速开发一整套后台管理项目；如果你觉得不错，就为作者点个✨star✨吧，你的支持就是对我最大的鼓励；
H5新增了drag标签，能够轻松的实现元素的拖拽效果，它可以允许用户在网页内部拖拽元素或者和其他应用程序之间进行元素的拖拽，当然也可以通过拖拽来实现数据的传递，可以说是又酷炫又实用；
拖拽事件
拖动的事件：dragstart、drag、dragend
放置事件：dragenter、drop、dragover
拖拽事件的执行流程
当我们拖动一个元素放置到目标的元素内时，会依次按顺序触发以下的拖拽事件，就像vue的钩子函数一样：
dragstart -> drag -> dragenter -> dragover -> drop -> dragend
拖拽事件~实现数据交互
拖拽事件里，我们可以通过dataTransfer来实现数据的交互，通过event.dataTransfer来获取dataTransfer实例；
方法：setData、getData、clearData
代码实例操作：🌰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>拖拽案例</title>
<style>
body {
height: 400px;
}
.parent {
position: relative;
height: 200px;
line-height: 200px;
margin: 0 auto;
border: 2px solid rgb(157, 13, 183);
text-align: center;
}
.prompt-font {
position: absolute;
font-size: 25px;
}
.child {
width: 100px;
height: 100px;
line-height: 100px;
float: left;
margin: 10px;
background-color: skyblue;
text-align: center;
color: white;
font-size: 20px;
}
</style>
<script>
window.onload = function () {
let parent = document.querySelector(".parent");
let childs = document.querySelectorAll(".child");
childs = Array.from(childs);
// console.log(childs);
childs.forEach(function (item) {
//拖放对象
//拖放事件
//开始拖放
item.ondragstart = function (event) {
event.dataTransfer.setData("id", item.id);
};
//正在拖放的事件
item.ondrag = function () {};
//拖放结束
item.ondragend = function () {};
});
//放置对象事件
//将拖放元素 拖放放置 对象中
// 进入目标元素
parent.ondragenter = function (event) {};
// 在目标元素内活动
parent.ondragover = function () {
//取消事件默认行为
event.preventDefault();
};
// 将拖放元素放置到目标元素内
parent.ondrop = function (event) {
let id = event.dataTransfer.getData("id");
let dom = document.querySelector("#" + id);
this.appendChild(dom);
event.stopPropagation();
};
document.body.ondragover = function (event) {
event.preventDefault();
};
document.body.ondrop = function (event) {
let id = event.dataTransfer.getData("id");
let dom = document.querySelector("#" + id);
this.appendChild(dom);
};
};
</script>
</head>
<body>
<div class="parent">
<span class="prompt-font">请将盒子拖入内部</span>
</div>
<div class="child" draggable="true" id="one">1</div>
<div class="child" draggable="true" id="two">2</div>
<div class="child" draggable="true" id="three">3</div>
<div class="child" draggable="true" id="four">4</div>
<div class="child" draggable="true" id="five">5</div>
</body>
</html>
sortablejs 拖拽效果~js库
用原生拖拽标签实现拖拽的效果还是非常消耗时间的，所以一般都是使用现成的js库，这里推荐我常用的sortablejs这个库，里面的效果都是常见的类型，足以满足日常的开发使用；
