实现步骤
1.首先写一个样式,初始化页面
代码如下(示例):
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
margin: 200px auto;
width: 200px;
list-style: none;
}
li {
margin: 5px;
text-align: center;
width: 200px;
height: 30px;
background-color: pink;
}
.list .moving {
/* "background: transparent;" 的意思是设置背景为透明。在网页设计中,可以使用这个样式属性来使元素的背景变成透明,从而显示出背后的元素或者背景图像。例如,可以在 CSS 中这样使用: */
background: transparent;
color: transparent;
border: 1px dashed #ccc;
}
</style>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
效果图:
2.现在还不能进行拖拽操作,如果要实现拖拽要给每个元素加一个draggable=“true”
代码如下(示例):
```c在这里插入代码片
<ul class="list">
<!-- draggable属性可以使元素可以拖动 -->
<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>
</ul>
效果图
3.具体代码
<script>
// 实现拖出去的元素,原位置样式变为透明虚线
// 实现拖动到其他元素上时,列表顺序发生改变
let list = document.querySelector('.list')
let currentLi // 用于存储当前被拖动的元素
// 监听拖动开始
list.addEventListener('dragstart', (e) => {
console.log(e, '88888');
// 拖动时默认行为是复制,此处可以改为移动
e.dataTransfer.effectAllowed = 'move'
// 存储被拖动元素
currentLi = e.target
// 此处使用setTimeout延迟被拖动的原始元素的样式
setTimeout(() => {
currentLi.classList.add('moving')
console.log(currentLi);
})
})
// 监听拖动中
list.addEventListener('dragenter', (e) => {
// 阻止默认事件,否则元素会先回到拖动开始时的位置,再到拖动结束的位置
e.preventDefault()
// 拖动事件期间排除被拖动元素自身,以及事件代理对象ul
if (e.target === currentLi || e.target === list) {
return
}
// list.children获取的是类数组,类数组没有数组的方法,所以要通过Array.from转换为真正的数组
let liArray = Array.from(list.childNodes)
// 获取当前拖动元素位置的下标
let currentIndex = liArray.indexOf(currentLi)
// 获取当前拖动元素所移动到的位置的元素的下标
let targetindex = liArray.indexOf(e.target)
// 如果当前拖动元素下标小于目标元素下标说明是往下移动,否则网上移动
if (currentIndex < targetindex) {
// 当前拖动元素插入到目标元素前面,且nextElementSibling目标元素的下一个兄弟元素
list.insertBefore(currentLi, e.target.nextElementSibling)
} else {
// 往上移动
list.insertBefore(currentLi, e.target)
}
})
// 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
list.addEventListener('dragover', (e) => {
e.preventDefault()
})
// 监听拖动结束
list.addEventListener('dragend', (e) => {
// 结束后移除虚线样式
currentLi.classList.remove('moving')
})
// 我的水印
</script>