时间戳

首页 > 解决方案 > 表格拖动器的基本实现

javascript - 表格拖动器的基本实现

问题描述

我正在尝试实现 table-dragger(basic)，但无法理解如何完成它。

以下是我的代码：

<!DOCTYPE html>
<html>
<head>
  <title>draggable</title>
  <script src="/Desktop/table-dragger.min.js"></script>
  <script type="text/javascript">

    var el = document.getElementById('table');

  var dragger = tableDragger(el, {
  mode: 'row',
  dragHandler: '.handle',
  onlyBody: true,
  animation: 300
});
dragger.on('drop',function(from, to){
  console(from);
  console(to);
});

  </script>
</head>
<body>
<table id="table">

    <thead>

    <tr>

      <th class='handle'>Header 1</th>

      <th class='handle'>Header 2</th>

      <th class='handle'>Header 3</th>

    </tr>

    </thead>

    <tbody>

    <tr>

      <td>Cell 1</td>

      <td>Cell 2</td>

      <td>Cell 3</td>
    </tr>

    </tbody>
  </table>
</body>
</html>

我也提供了 table-dragger.min.js 的路径。现在要在这里做什么？该页面不显示任何可拖动的内容（行）。

标签： javascript

解决方案

如果你检查你的控制台，你一定会看到一个JS错误。就像是

table-dragger: el must be TABLE HTMLElement, not [object Null]

这是因为当您尝试获取 DOM 时，没有在其中添加任何表

 var el = document.getElementById('table');

它给你null。所以你table-dragger抛出一个错误。

一个快速的解决方法就是移动你的sctiptwherebody标签被关闭，这应该可以解决它。

就像是

<!DOCTYPE html>
<html>
<head>
  <title>draggable</title>
  <script src="https://cdn.jsdelivr.net/npm/table-dragger@1.0.2/dist/table-dragger.min.js"></script>
 
</head>
<body>
<table id="table">

    <thead>

    <tr>

      <th class='handle'>Header 1</th>

      <th class='handle'>Header 2</th>

      <th class='handle'>Header 3</th>

    </tr>

    </thead>

    <tbody>

    <tr>

      <td>Cell 1</td>

      <td>Cell 2</td>

      <td>Cell 3</td>
    </tr>

    </tbody>
  </table>
   <script type="text/javascript">

    var el = document.getElementById('table');

  var dragger = tableDragger(el, {
  mode: 'row',
  dragHandler: '.handle',
  onlyBody: true,
  animation: 300
});
dragger.on('drop',function(from, to){
  console(from);
  console(to);
});
</script>
</body>

  
</html>

推荐阅读