前端使用H5中draggable实现拖拽排序效果

文章目录

一、实现代码

html 复制代码
<!DOCTYPE html>
<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>
<div class="list">
    <div draggable="true" class="list-item">1</div>
    <div draggable="true" class="list-item">2</div>
    <div draggable="true" class="list-item">3</div>
    <div draggable="true" class="list-item">4</div>
    <div draggable="true" class="list-item">5</div>
    <div draggable="true" class="list-item">6</div>
    <div draggable="true" class="list-item">7</div>
    <div draggable="true" class="list-item">8</div>
    <div draggable="true" class="list-item">9</div>
</div>
</body>
<script type="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>

二、实现效果

相关推荐
cwj&xyp2 小时前
Python(二)str、list、tuple、dict、set
前端·python·算法
dlnu20152506222 小时前
ssr实现方案
前端·javascript·ssr
古木20192 小时前
前端面试宝典
前端·面试·职场和发展
轻口味4 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王4 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发4 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀5 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪5 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef7 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端