前言
拖拽功能在实际项目中经常遇到，比如拖拽排序、拖拽添加与移除等，所以给大家分享一种使用原生js实现的拖拽方式，这个方式借助的是html5新增的draggable标签属性
源码地址: gitee.com/powerJproud…
项目预览
draggable介绍
定义：draggable 属性规定元素是否可拖动。
开启draggable
在标签中加入draggable="true"即可开启draggable
<div draggable="true"></div>
draggable的钩子事件
- 拖拽时
- dragstart：开始
- drag：进行时
- dragend：结束
- 进入区域后
- dragenter：进入时
- drageover：进入后
- dragleave：离开
- drop：放置
项目实践
搭建页面结构
<body>
<section class="main">
<h1>请选择喜欢的头像</h1>
<div class="container">
<div class="empty"></div>
</div>
</section>
<section class="patterns">
<img draggable="true" src="./assets/img/Compendium.jpeg" alt="Compendium">
<img draggable="true" src="./assets/img/Naruto.jpeg" alt="Naruto">
<img draggable="true" src="./assets/img/Sasuke.jpeg" alt="Sasuke">
</section>
<script src="./index.js"></script>
</body>
添加监听事件
const empty = document.querySelector("div.empty");
const title = document.querySelector("h1");
const patterns = document.querySelector(".patterns");
let imgName;
// 拖拽开始时触发
document.addEventListener("dragstart", (e) => {
imgName = e.target.alt;
});
// 拖拽进行时触发事件，给内容和容器加上边框
document.addEventListener("drag", (e) => {
e.target.style.border = "3px dashed red";
empty.style.border = "3px dashed red";
});
// 选择目标进入放置区域后触发
document.addEventListener("dragenter", (e) => {
title.innerHTML = imgName;
title.style.color = "red";
});
// 拖拽结束触发事件，去除内容和容器边框
document.addEventListener("dragend", (e) => {
e.target.style.border = "none";
empty.style.border = "none";
title.innerHTML = "请选择喜欢的头像";
title.style.color = "black";
});
// 拖拽元素进入目标区域时触发
empty.addEventListener("dragover", (e) => {
// 判断目标区域内若已有元素则移除
if (empty.firstChild) {
empty.removeChild(empty.firstChild);
}
e.preventDefault();
});
// 放置触发事件
empty.addEventListener("drop", (e) => {
// 阻止默认事件
e.preventDefault();
// cloneNode作用为克隆元素节点，若直接使用appendChild原有元素节点将消失
let targetImg = document.querySelector(`img[alt=${imgName}]`).cloneNode(true);
targetImg.style.width = "150px";
targetImg.style.height = "150px";
targetImg.style.border = "none";
e.target.appendChild(targetImg);
});
结语
本篇文章只是简单实现拖拽功能，项目中更高级的效果可以通过事件进行升级，感谢大家浏览。
