首页js 完整实现在指定类名dom下第一层子节点可拖拽排序，不是指定类名下的dom不可以拖拽排序，将所有代码放在html中

js 完整实现在指定类名dom下第一层子节点可拖拽排序，不是指定类名下的dom不可以拖拽排序，将所有代码放在html中

时间: 2024-02-27 22:53:07 浏览: 80

好的，下面是完整的 HTML 代码实现： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>可拖拽排序</title> <style> .class-name { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background-color: #eee; margin: 10px; font-size: 24px; font-weight: bold; cursor: move; } </style> </head> <body> <div class="container"> <div class="class-name">1</div> <div class="class-name">2</div> <div class="class-name">3</div> <div class="class-name">4</div> <div class="class-name">5</div> </div> <script> // 获取指定类名的 dom 节点 const doms = Array.from(document.querySelectorAll('.class-name')); // 给每个节点添加 draggable 属性 doms.forEach(dom => { dom.draggable = true; }); // 记录当前拖拽的节点的索引 let dragIndex = 0; // 给每个节点添加 dragstart 事件 doms.forEach((dom, index) => { dom.addEventListener('dragstart', e => { dragIndex = index; }); }); // 给每个节点添加 dragover 事件 doms.forEach((dom, index) => { dom.addEventListener('dragover', e => { e.preventDefault(); const dropIndex = index; if (dragIndex !== dropIndex) { // 交换节点的位置 const parentNode = dom.parentNode; const dragDom = parentNode.children[dragIndex]; const dropDom = parentNode.children[dropIndex]; parentNode.insertBefore(dragDom, dropDom); } }); }); // 在 dragend 事件中重新排列节点的顺序 document.addEventListener('dragend', e => { doms.forEach((dom, index) => { dom.style.order = index; }); }); </script> </body> </html> ``` 这个例子中，`.class-name` 是我们要拖拽排序的节点的类名，我们可以通过修改这个类名来指定不同的节点。同时，我们还可以通过修改 CSS 样式来更改节点的样式。

阅读全文