<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style-type: none;
}
html,
body {
padding: 10px;
}
ul {
display: flex;
flex-wrap: wrap;
}
li {
width: 100px;
height: 100px;
border-radius: 50%;
line-height: 40px;
border: 1px solid black;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
transition: all 1s ease;
}
.bg {
background: pink;
}
</style>
</head>
<body>
<ul>
<li draggable="true">1</li>
<li draggable="true">2</li>
<li draggable="true">3</li>
<li draggable="true">4</li>
<li draggable="true">5</li>
<li draggable="true">6</li>
<li draggable="true">7</li>
<li draggable="true">8</li>
<li draggable="true">9</li>
<li draggable="true">10</li>
<li draggable="true">11</li>
<li draggable="true">12</li>
<li draggable="true">13</li>
<li draggable="true">14</li>
<li draggable="true">15</li>
<li draggable="true">16</li>
<li draggable="true">17</li>
<li draggable="true">18</li>
<li draggable="true">19</li>
<li draggable="true">20</li>
<li draggable="true">21</li>
<li draggable="true">22</li>
<li draggable="true">23</li>
<li draggable="true">24</li>
<li draggable="true">25</li>
<li draggable="true">26</li>
<li draggable="true">27</li>
<li draggable="true">28</li>
<li draggable="true">29</li>
<li draggable="true">30</li>
</ul>
<script>
function list(dom) {
// 获取li全部节点
let list = document.querySelectorAll(dom);
// 被选中的节点
let Default = '';
for (let [key, val] of Object.entries(list)) {
// 当用户开始拖拽一个元素或选中的文本时触发(见开始拖拽操作)。
val.addEventListener('dragstart', function (ev) {
Default = this;
this.setAttribute('class', 'bg') //添加
})
// 当元素或选中的文本被拖到一个可释放目标上时触发
val.addEventListener('dragover', function (ev) {
ev.preventDefault();
// 目标节点前兄弟节点
let agoNode = this.previousElementSibling;
// 目标节点后兄弟节点
let AfterNode = this.nextElementSibling
if (AfterNode == null) {
// 判断目标节点后兄弟节点不为空
console.log(1)
this.parentNode.appendChild(Default)
} else if (Default == agoNode) {
// 拖拽节点等于目标节点上一个节点
console.log(2)
this.parentNode.insertBefore(this, Default)
// 目标节点放到拖拽节点前面
} else if (Default != agoNode && Default != AfterNode) {
// 拖拽节点不等于目标节点前和后兄弟节点
console.log(3)
// 拖拽节点放在目标节点后兄弟节点前面
this.parentNode.insertBefore(Default, AfterNode)
} else {
// 默认
console.log(3)
this.parentNode.insertBefore(Default, this)
}
})
// 当元素或选中的文本被拖到一个可释放目标上时触发
val.addEventListener('drop', function (ev) {
ev.preventDefault();
// 清除class
Default.removeAttribute('class', 'bg')
})
// 当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键).
val.addEventListener('dragend', function (ev) {
// 清除class
Default.removeAttribute('class', 'bg')
})
}
}
list('li')
</script>
</body>
</html>
pc端html5拖拽
最新推荐文章于 2023-06-11 21:50:24 发布