为单个td实现table-draagger

时间:2018-11-01 05:30:12

标签: javascript html

以下是我的代码,它使用table-draagger的基本实现:

<!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>Header 1</th>

      <th>Header 2</th>

      <th>Header 3</th>

    </tr>

    </thead>

    <tbody>

    <tr>

      <td class='handle'>Cell 1</td>

      <td class='handle'>Cell 2</td>

      <td class='handle'>Cell 3</td>
    </tr>

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

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

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

我现在只希望表的td在列模式下是可拖动的(如代码所示),但是由于拖曳了带有标题的整个列,所以我无法这样做。 ?

0 个答案:

没有答案