文章目录
一、实现效果①
将一个节点拖到另一个节点之前或之后
1、实现代码
<!DOCTYPEhtml><style>*{padding: 0;margin: 0;}body{display: flex;width: 100%;height: 100vh;justify-content: center;align-items: center;}.list{display: flex;width: 336px;flex-wrap: wrap
}.list-item{width: 100px;height: 50px;margin-top: 10px;border: 1px solid gray;margin-right: 10px;background-color: gray;color: #fff;}/*list-item 和 moving 同时在一个元素时生效*/.list-item.moving{color: transparent;background-color: transparent;border: 1px dashed gray !important;}</style><body><divclass="list"><divdraggable="true"class="list-item">1</div><divdraggable="true"class="list-item">2</div><divdraggable="true"class="list-item">3</div><divdraggable="true"class="list-item">4</div><divdraggable="true"class="list-item">5</div><divdraggable="true"class="list-item">6</div><divdraggable="true"class="list-item">7</div><divdraggable="true"class="list-item">8</div><divdraggable="true"class="list-item">9</div></div></body><scripttype="text/javascript">let sourceNode;const list = document.querySelector(".list");// 当拖拽开始的时候
list.ondragstart=(e)=>{
console.log("当前拖动的节点：");
console.log(e.target);
e.target.classList.add("moving");
sourceNode = e.target;};// 当拖拽进入某个节点时候
list.ondragenter=(e)=>{if(e.target === list || e.target === sourceNode){return;}
console.log("拖拽到节点：");
console.log(e.target);// Array.from ES6：将类数组对象 转成真正的数组 就可以使用数组自带的方法indexOf了const children = Array.from(list.children);const sourceIndex = children.indexOf(sourceNode);const targetIndex = children.indexOf(e.target);// insertBefore 插入的节点如果在list中存在，那么则会删除，再插入新的位置if(sourceIndex < targetIndex){// 拖拽节点下标小于目标节点的下标// 在目标节点的下一个元素之前插入拖拽的节点
list.insertBefore(sourceNode, e.target.nextElementSibling);}else{// 拖拽节点下标大于目标节点的下标// 在目标节点之前插入拖拽的节点
list.insertBefore(sourceNode, e.target);}};// 当前拖拽节点拖拽结束
list.ondragend=(e)=>{
e.target.classList.remove('moving');}// 381 245 976</script></html>
2、效果演示
二、实现效果②
两个节点单纯的进行互换位置操作
1.实现代码
<!DOCTYPEhtml><style>*{padding: 0;margin: 0;}body{display: flex;width: 100%;height: 100vh;justify-content: center;align-items: center;}.list{display: flex;width: 336px;flex-wrap: wrap
}.list-item{width: 100px;height: 50px;margin-top: 10px;border: 1px solid gray;margin-right: 10px;background-color: gray;color: #fff;}/*list-item 和 moving 同时在一个元素时生效*/.list-item.moving{color: transparent;background-color: transparent;border: 1px dashed gray !important;}</style><body><divclass="list"><divdraggable="true"class="list-item">1</div><divdraggable="true"class="list-item">2</div><divdraggable="true"class="list-item">3</div><divdraggable="true"class="list-item">4</div><divdraggable="true"class="list-item">5</div><divdraggable="true"class="list-item">6</div><divdraggable="true"class="list-item">7</div><divdraggable="true"class="list-item">8</div><divdraggable="true"class="list-item">9</div></div></body><scripttype="text/javascript">let sourceNode;const list = document.querySelector(".list");// 当拖拽开始的时候
list.ondragstart=(e)=>{
console.log("当前拖动的节点：");
console.log(e.target);
e.target.classList.add("moving");
sourceNode = e.target;};
list.ondragover=(e)=>{
e.preventDefault();};// 当拖拽放入某个目标节点后
list.ondrop=(e)=>{if(e.target === list || e.target === sourceNode){return;}
console.log("拖拽到节点：");
console.log(e.target);// Array.from ES6：将类数组对象 转成真正的数组 就可以使用数组自带的方法indexOf了let targetSbin = e.target.nextElementSibling;let sourceSbin = sourceNode.nextElementSibling;// 在目标节点的下一个节点之前插入拖动节点
list.insertBefore(sourceNode, targetSbin);// 在拖动节点的下一个节点之前插入目标节点
list.insertBefore(e.target, sourceSbin);};// 当前拖拽节点拖拽结束
list.ondragend=(e)=>{
e.target.classList.remove('moving');}// 381 245 976</script></html>
2.效果演示
标签：
前端
本文转载自: https://blog.csdn.net/dgfdhgghd/article/details/132836598
版权归原作者 这里是杨杨吖 所有， 如有侵权，请联系我们删除。
版权归原作者 这里是杨杨吖 所有， 如有侵权，请联系我们删除。