原生js表格内容拖拽 FroSro(优快云)

最新推荐文章于 2025-10-06 13:51:14 发布

原创

最新推荐文章于 2025-10-06 13:51:14 发布 · 置顶 · 1.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#js #拖拽

这篇博客分享了如何利用原生JavaScript实现表格内容的拖拽功能，通过实例代码详细解析了拖拽操作的实现过程。

由于有新的需求，所以我参考了网上的一些资料，自己做了一个拖拽功能的demo，直接上代码。

<!DOCTYPE html>
<html>
<head>
	<title></title>
      <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">
td{
    border: 1px solid #000;
    height: 100px;
    width: 100px;
}
</style>
</head>

<body>
<table style="float: left;">
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

<table style="float: right;">
    <tr>
        <td><div  id="drag" >**********</div></td>
        <td><div  id="drag2">11111111</div></td>
    </tr>
    <tr>
        <td><div  id="drag3" >2222222</div></td>
        <td><div  id="drag1">*3333333333</div></td>
    </tr>
</table>