(四)原生 WEB 拖动排序
2024-07-06使用原生的拖动排序
在我们网页开发中经常需要做拖动排序源码代码语言:javascript复制
const list = document.querySelector('.root')
let onElment // 记录当前正在拖动的元素
// 事件委托监听
list.ondragstart = (e) => {
setTimeout(() => {
// 异步来添加样式,防止拖动的样式耶也变化了
e.target.classList.add('moving')
}, 0)
onElment = e.target
// 给拖动的默认行为变为拖动 - 让默认行为的是复制
e.dataTransfer.effectAllowed = 'move'
}
// 阻止默认行为允许拖动
list.ondragover = (e) => {
e.preventDefault()
}
// 元素会发生改变,事件委托监听
list.ondragenter = (e) => {
// 阻止默认行为允许拖动
e.preventDefault()
// 判断是否拖动到了自身元素或者是父元素-如果是就直接 return
if (e.target === list || e.target === onElment) return
// 调用 Array.forem 来将一个类数组转换成一个真正的数组
const children = Array.from(list.children)
// 获取当前拖动这个元素的下标
const sourceIndex = children.indexOf(onElment)
// 获取被覆盖的元素下表
const targetIndex = children.indexOf(e.target)
// 判断他两个下标来判断是向上拖动还是向下拖动
if (sourceIndex < targetIndex) {
console.log('向下拖动')
// 向下拖动给他放到覆盖元素的下面
list.insertBefore(onElment, e.target.nextElementSibling)
} else {
console.log('向上拖动')
// 向上拖动给他放到覆盖元素的上面
list.insertBefore(onElment, e.target)
}
}
// 拖动完成把样式变回来
list.ondragend = (e) => {
e.target.classList.remove('moving')
}
.root {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
color: #fff;
text-align: center;
}
.item {
padding: 15px;
margin-top: 10px;
background-color: rgb(0, 158, 79);
border-radius: 5px;
}
.moving {
border: 1px solid rgb(150, 150, 150);
background-color: transparent;
color: #000;
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。 原始发表:2022年11月2日,如有侵权请联系 cloudcommunity@tencent.com 删除前往查看开发排序源码本文分享自 作者个人站点/博客 前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!
开发排序源码