Javascript 表拖动器的基本实现_Javascript

Javascript 表拖动器的基本实现

javascript

Javascript 表拖动器的基本实现,javascript,Javascript,我正在尝试实现TableDragger（basic），但无法理解如何实现它以下是我的代码： <!DOCTYPE html> <html> <head> <title>draggable</title> <script src="/Desktop/table-dragger.min.js"></script> <script type="text/javascript"> var

我正在尝试实现TableDragger（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>


拖动
var el=document.getElementById（'table'）；
var dragger=表格dragger（el{
模式：“行”，
德拉甘德勒：“.handle”，
是的，
动画：300
});
dragger.on（'drop'，函数（从，到）{
控制台（来自）；
控制台（至）；
});
标题1
标题2
标题3
第1单元
第2单元
第三单元

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

如果检查控制台，必须看到

JS

错误。差不多

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

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

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

它给你零。因此，您

表格拖动器会抛出一个错误
快速修复方法是将sctipt
移动到关闭body
标记的位置，这样应该可以修复它
差不多
table-dragger: el must be TABLE HTMLElement, not [object Null]



拖动
标题1
标题2
标题3
第1单元
第2单元
第三单元
var el=document.getElementById（'table'）；
var dragger=表格dragger（el{
模式：“行”，
德拉甘德勒：“.handle”，
是的，
动画：300
});
dragger.on（'drop'，函数（从，到）{
控制台（来自）；
控制台（至）；
});
如果检查控制台，必须看到JS
错误。差不多
table-dragger: el must be TABLE HTMLElement, not [object Null]

这是因为当您尝试使用DOM时，DOM中没有添加任何表
 var el = document.getElementById('table');

它给你零。因此，您表格拖动器会抛出一个错误
快速修复方法是将sctipt
移动到关闭body
标记的位置，这样应该可以修复它
差不多
table-dragger: el must be TABLE HTMLElement, not [object Null]



拖动
标题1
标题2
标题3
第1单元
第2单元
第三单元
var el=document.getElementById（'table'）；
var dragger=表格dragger（el{
模式：“行”，
德拉甘德勒：“.handle”，
是的，
动画：300
});
dragger.on（'drop'，函数（从，到）{
控制台（来自）；
控制台（至）；
});
如果要移动行，请更改dragHandler:“
若要移动行，请将脚本标记置于
之前，然后更改dragHandler:“
在
前面加上script标签，如果有任何链接可以帮助我理解基础知识，那也会有帮助。你确定table dragger.min.js
加载正确吗？我不知道有哪个系统会使用/Desktop
作为目录。我不知道这一点，我假设需要在这里提供我的目录的路径。谢谢你指出这一点。也许，如果有任何链接可以帮助我理解基本知识，这也会有帮助。你确定table dragger.min.js
加载正确吗？我知道没有任何系统使用/Desktop
作为目录。我不知道同样的情况，我假设需要在这里提供我的目录的路径。感谢您指出这一点。