案例一：javascript的拖拽事件(drag，drop)
案例一：
提示：以前写过关于图片的拖拽效果；今天主要写一下例如自定义的一些div拖拽这种
前言
提示：主要是为了积累遇到的问题，和别人询问的问题（俗话说的好，好记性不如烂笔头，所以记录问题和解决问题个人感觉是非常重要的！！！！！）
提示：以下是本篇文章正文内容，下面案例可供参考
一、拖拽效果如下步骤所示
1.正常的排序如下：
2.拖拽列表1与列表2互换位置
常按的效果如下图：
切换位置后的效果如下图：
二、具体代码如下
1.HTML部分代码块
代码如下（示例）：
<!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>Document</title>
<style>
ul{
width: 25%;
margin: 0 auto;
}
.trs{
width: 180px;
text-align: center;
border: 2px dashed rgb(214, 134, 36) ;
background-color: rgb(227, 230, 232);
margin-top: 12px;
}
</style>
</head>
<body>
<!-- 主体dom结构 -->
<ul>
<div class="trs" draggable="true">列表1</div>
<div class="trs" draggable="true">列表2</div>
<div class="trs" draggable="true">列表3</div>
<div class="trs" draggable="true">列表4</div>
<div class="trs" draggable="true">列表5</div>
</ul>
</body>
</html>
2.javascript部分代码块
代码如下（示例）：
<script>
let listText =""
// 第一步：获取DOM节点 (这里我使用的时间冒泡，就不用给单独给每个div绑定事件了)
var ul = document.querySelector(ul)
//第二步：添加dragstart事件 (这里是拖拽前触发的时间，不要使用preventDefault阻止默认时间)
ul.addEventListener(dragstart,function(event){
event.dataTransfer.setData(drag_text,event.target.innerHTML) //1.设置拖拽元素的DOM
})
// 第三步：添加dragover事件 (这个事件是必须添加的，不添加这个dragover事件，drop事件触发不了)
ul.addEventListener(dragover,function(event){
event.preventDefault() // ****************************必须声明的事件*****************************8
})
// 第四步：添加drop拖拽完成事件 (主要是监听完成拖拽的事件)
ul.addEventListener(drop,function(event){
event.preventDefault()
listText =event.target.innerHTML //3.获取到目标元素的DOM
const drag_text =event.dataTransfer.getData(drag_text) //2.获取到拖拽元素的DOM
event.target.innerHTML=drag_text //4.将目标元素更改为拖拽元素
})
ul.addEventListener(dragend,function(event){
event.preventDefault()
event.target.innerHTML=listText
})
</script>
3.js代码说明：
此处的案例：主要是为了掩饰如何使用的基础用法，在项目中使用的话，需要给可以拖拽的空间限制一个区域，要不然就会出现拖拽到 body标签上，或者其他标签上。👍👍
总结：下面的🔗是跳转到案例二（关于表格的拖拽的效果）
提示：不明白的可以查看代码块中的注释或者联系博主！！！！！
