Question

我正在尝试实现table-draagger（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的路径。现在在这里要做什么？该页面未显示任何可拖动的内容（行）。

Answer 1

如果您检查控制台，则必须看到JS错误。像

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

这是因为尝试使用DOM时，您的DOM中没有添加任何表。

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

它为您提供了null。因此，您table-dragger引发错误。

一种快速的解决方法是将sctipt标签移到body标签被关闭的位置，这应该可以解决它。

类似

<!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>

Answer 2

如果要移动行，请更改dragHandler：“”

var dragger = tableDragger(el,{    
 mode: 'row',
dragHandler: '',
onlyBody: true,
animation: 300
});

并将脚本标记放在

之前

table-draagger的基本实现

2 个答案: