一个简单的可拖拽表格案例实现

coder_glack

于 2022-07-27 22:15:41 发布

阅读量372

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_43013884/article/details/126024333

版权

本文作者分享了自己实现一个可拖拽表格的前端小demo过程，通过学习和实践掌握JavaScript中的拖放事件处理。

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

近期对表格的拖拽比较感兴趣，想着自己弄个小demo来学习一下这些事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
     
        border: 1px solid #7c7c7c;
        border-spacing: 1px;
        border-collapse: collapse;
      }
      tr > th,
      tr > td {
     
        width: 100px;
        text-align: center;
        /* border: 1px solid #ececec; */
      }
      tr > td:last-child {
     
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <table>
      <!-- <thead> -->
      <tr
        id="node0"
        data-id="node0"
        ondrop="onDrop(event, 'node0')"
        ondragstart="dragStart(event, 'node0')"
        ondragover="onDragOver(event, 'node0')"
        draggable="false"
        ondragenter="dragEnter(event, 'node0')"
        ondragleave="onLeave(event, 'node0')"
      >
        <th>姓名</th>
        <th>年龄</th>
        <th>身高</th>