H5ke14--2--建立表格可移动行-含源代码

最新推荐文章于 2024-09-13 21:00:00 发布

白天的我最菜

最新推荐文章于 2024-09-13 21:00:00 发布

阅读量663

点赞数 18

分类专栏： H5 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_72735063/article/details/134886244

版权

H5 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了如何在HTML表格中实现拖动功能，包括设置可拖动的行，使用`dragstart`事件存储行ID，`dragover`事件阻止默认行为，以及`drop`事件处理数据传输和节点插入。

摘要由CSDN通过智能技术生成

首先要每一行设置可拖动,每一行获取他的id放到dataTransfer,阻止目的内移动的默认禁止事件,放下我就拿到dataTransfer数据,通过id得到他的对象,获取目标的对象的tr(父),两个对象的tr转换

draggable="true",dragover设置,preventDefault阻止我dragover(目的内移动)就可以,dataTransfer.getData,得到getElementById,e.target.parentNode;,insertBefore(oldTr, newTr);

标注:我们有两个事件有两个datatranfer(只是作为一个容器),第一个放到名字为"text"的键值对,取也是通过"text"来取

点击与释放,点击捕获的是一行,释放移到的是一个td,所以要获取td的父元素tr,所以点击的td还要转化为tr才能进行转化,oldTr.parentNode

实践,要冒泡的(子元素触发了同时触发父元素),一个表格要知道选定的id以及,目标地点的idparentNodedrop用到inserbefore()节点就是行放到transfer

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            table,td,tr{
                border: 1px solid black;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <table id="myTable">
            <thead>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>班级</td>
            </tr>
            </thead>
            <tr draggable="true" id="row1">
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>20</td>
                <td>1</td>
            </tr>
            <tr draggable="true" id="row2">
                <td>2</td>
                <td>李四</td>
                <td>女</td>
                <td>21</td>
                <td>2</td>
            </tr>
            <tr draggable="true" id="row3">
                <td>3</td>
                <td>王五</td>
                <td>男</td>
                <td>22</td>
                <td>3</td>
            </tr>
            <tr draggable="true" id="row4">
                <td>4</td>
                <td>赵六</td>
                <td>女</td>
                <td>23</td>
                <td>4</td>
            </tr>
            <tr draggable="true" id="row5">
                <td>5</td>
                <td>田七</td>
                <td>男</td>
                <td>24</td>
                <td>5</td>
            </tr>
        </table>
        <script type="text/javascript">
            //搜索子元素tr,都设置data
            let rows = document.querySelectorAll('#myTable tr[draggable=true]');
            for(let i=0; i<rows.length; i++) {
                rows[i].addEventListener('dragstart', function(e) {
                    e.dataTransfer.setData("Text", this.id);
                    // alert(e.dataTransfer.getData("Text"))//就是row1
                });
            }
            //直接就是table
            document.querySelector('#myTable').addEventListener('dragover', function(e) {
                e.preventDefault();
            });
            //放,为什么阻止事件
            document.querySelector('#myTable').addEventListener('drop', function(e) {
                e.preventDefault();
                let data = e.dataTransfer.getData("Text");
                let oldTr = document.getElementById(data);
                let newTr = e.target.parentNode;
                //新与旧的id是否一样,插入到新旧之间
                if(oldTr != newTr && newTr.tagName.toLowerCase() == 'tr') {
                    oldTr.parentNode.insertBefore(oldTr, newTr);
                }
                alert(e.target.parentNode)
            });
        </script>
    </body>
</html>
<!--建立一个表格,拖动-->