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

    文章目录

    一、实现效果①

    将一个节点拖到另一个节点之前或之后

    1、实现代码

    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">1div>
    <div draggable="true" class="list-item">2div>
    <div draggable="true" class="list-item">3div>
    <div draggable="true" class="list-item">4div>
    <div draggable="true" class="list-item">5div>
    <div draggable="true" class="list-item">6div>
    <div draggable="true" class="list-item">7div>
    <div draggable="true" class="list-item">8div>
    <div draggable="true" class="list-item">9div>
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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94

    2、效果演示

    在这里插入图片描述

    二、实现效果②

    两个节点单纯的进行互换位置操作

    1.实现代码

    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">1div>
    <div draggable="true" class="list-item">2div>
    <div draggable="true" class="list-item">3div>
    <div draggable="true" class="list-item">4div>
    <div draggable="true" class="list-item">5div>
    <div draggable="true" class="list-item">6div>
    <div draggable="true" class="list-item">7div>
    <div draggable="true" class="list-item">8div>
    <div draggable="true" class="list-item">9div>
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.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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92

    2.效果演示

    在这里插入图片描述

  • 相关阅读:
    2 Spring Boot 整合 Thymeleaf
    labml-nn：带注释的 pyTorch 论文实现
    爱奇艺的架构到底有多牛？
    springcloud3 分布式事务实现逻辑思想2
    配置式表单渲染器的实现
    CentOS8/RHEL8 root密码破解
    LeetCode-102-二叉树的层序遍历
    进程和线程有什么区别？
    【Tools】了解人工通用智能 (AGI)：未来的智能体
    数据可视化（python）----中国近十年就业GDP对比
  • 原文地址：https://blog.csdn.net/dgfdhgghd/article/details/132836598