代码之家 › 专栏 › 技术社区 › MVS

表拖动器的基本实现

javascript

MVS · 技术社区 · 6 年前

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

2 回复 | 直到 6 年前

Muhammad Usman 6 年前

如果你检查控制台,你一定会看到 JS 错误。像这样的

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

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

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

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>

Parth Lukhi 6 年前

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

并将脚本标记放在</车身>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

4 月前

Alex · 在轻量级中同时解构和不解构变量

4 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前