javascript - jQuery 拖放表格列

标签 javascript jquery frontend

我对前端工作非常陌生。我尝试理解 Stack Overflow 上有关此主题的所有先前问题。但它们充满了我不明白的东西。简短的故事:我想为列制作一个拖放表格。

我找到了这个网站:https://akottr.github.io/dragtable/

我想通过 jQuery 实现拖放操作。我该怎么做?

编辑

我尝试尝试使用上面找到的页面中的信息。我想做他们展示的第一个演示表。但我就是无法让它发挥作用。我把他们的 jQuery 脚本放在我的标题中,检查后我模仿并用 # 调用我的类(出于某种原因??他们不应该用点吗?)。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>My page</title>


    <link href="StyleSheet.css" rel="stylesheet" />
    <link href="Content/bootstrap-grid.css" rel="stylesheet" />
    <link href="Content/bootstrap.css" rel="stylesheet" />

    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/jquery-3.3.1.js"></script>
    <script src="Scripts/bootstrap.bundle.js"></script>

    <script>$('#table).dragtable();</script>

</head>



<body style="cursor: auto;">
    <div class="content">
        <table class="table table-striped" draggable="true">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>

</html>

最佳答案

在这家伙的 git 上找到了答案:

https://github.com/alexshnur/drag-n-drop-table-columns

非常感谢 Alex!

关于javascript - jQuery 拖放表格列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50996140/

相关文章:

javascript - Redux - 可以进行不影响状态的操作吗

javascript - 在 React 中使用 onClick 处理程序输入?

javascript - 具有 asyc 属性的脚本仍然会阻止其他脚本执行

javascript - 在 IE7 中调试 javascript 'unspecified error'

javascript - 如何处理 Node.js 中的文件上传中断

javascript - 如何使用 JavaScript 增加下拉框中的年份

javascript - 使用es6模板字符串加载器导入html文件

javascript - 如何在选定的元素上调用函数?

javascript - 如何将元素以所需的格式插入数组

javascript - 如何在 React 中打印 SVG 元素中的列表?