原生Javascript实现拖拽排序
原生Javascript实现拖拽排序
- 前提要素
- html + css
- JS
- 效果
前提要素
- 重要知识点
- draggable=“true” 允许元素拖拽
- ondragstart（用户开始拖动元素时触发）
- ondragenter（当被鼠标拖动的对象进入其容器范围内时触发此事件）
- ondragend（用户完成元素拖动后触发）
- ondragover（当某被拖动的对象在另一对象容器范围内拖动时触发此事件）
- Array.from （可以将类数组转为数组）
- insertBefore （这个方法将把一个新元素插入到一个现有元素的前面）
- nextElementSibling（属性返回指定元素之后的下一个兄弟元素）
html + css
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>Documenttitle><style>*{padding: 0;margin: 0;}body{width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;background-color: blanchedalmond;}ul li {list-style: none;height: 20px;padding: 10px 40px;margin-top: 5px;background-color: darkgray;}.moving {background-color: transparent;color: transparent;border: 1px dashed black;}style>
head>
<body><ul class="draList"><li draggable="true">1li><li draggable="true">2li><li draggable="true">3li><li draggable="true">4li><li draggable="true">5li><li draggable="true">6li><li draggable="true">7li><li draggable="true">8li>ul><script src="./drages.js">script>
body>
html>
JS
// 获取列表dom
let list = document.querySelector('.draList');
// 创建cruentItem存放将要拖动的元素
let cruentItem
// 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
list. ondragover = e => {e.preventDefault();
}
// 拖动开始
list.ondragstart = e => {// 此处使用setTimeout延迟被拖动的原始元素的样式setTimeout(() => {e.target.classList.add("moving");},0)// 存储被拖动元素cruentItem = e.target;// 拖动时默认行为是复制，此处可以改为移动e.dataTransfer.effectAllowed = 'move';
}// 拖动中
list.ondragenter = e => {// 阻止默认事件，否则元素会先回到拖动开始时的位置，再到拖动结束的位置e.preventDefault();// 拖动事件期间排除被拖动元素自身，以及事件代理对象ulif(e.target == cruentItem || e.target == list) {return;}// list.children获取的是类数组，类数组没有数组的方法，所以要通过Array.from转换为真正的数组let itmeList = Array.from(list.children);// 获取当前拖动元素位置的下标let tiemListIndex = itmeList.indexOf(cruentItem);// 获取当前拖动元素所移动到的位置的元素的下标let targetIndex = itmeList.indexOf(e.target);// 如果当前拖动元素下标小于目标元素下标说明是往下移动，否则网上移动if (tiemListIndex < targetIndex) {console.log('往下移动');// 当前拖动元素插入到目标元素前面，且nextElementSibling目标元素的下一个兄弟元素list.insertBefore(cruentItem, e.target.nextElementSibling)} else {console.log('往上移动');list.insertBefore(cruentItem, e.target)}
}// 拖动结束
list.ondragend = e => {// 结束后移除虚线样式e.target.classList.remove('moving')
}效果
本案例学习后记录于此，也方便自己往后参考，其中动画效果，我这里省略了。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！