javascript - jQuery drag and drop table column

I'm very new to frontend work. I tried understanding all the previous questions about this theme on Stack Overflow. But they are full of things I don't understand. Short story: I want to make a drag and drop table for columns.

I found this site: /

I want to make it possible with the drag and drop with jQuery. How can I do it?

Edit

I tried experimenting with info from the page I found above. I want to do the first demo table they show. But I just can't get it to work. I put their jQuery script in my header and after inspection I mimic and call my class with a # (for some reason?? shouldn't they be with a dot?).

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

I found this site: https://akottr.github.io/dragtable/

I want to make it possible with the drag and drop with jQuery. How can I do it?

Edit

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

Share Improve this question edited Jan 17, 2020 at 22:26 halfer 20.4k19 gold badges109 silver badges202 bronze badges asked Jun 22, 2018 at 22:06 Kalle 1331 gold badge2 silver badges10 bronze badges

Do you have any code of your best try to show? Or you're seeking for a tutorial on how to? – Roko C. Buljan Commented Jun 22, 2018 at 22:08
I only took some code from boostrap. Just wanted to make a simple table to learn. I used the "striped rows" code from getbootstrap./docs/4.1/content/tables So, I haven't anything else on my index page other than that example there. – Kalle Commented Jun 22, 2018 at 22:23
1 If you'd like to implement drag/drop by yourself, check Javascript MDN: DragEvent – Sphinx Commented Jun 22, 2018 at 22:32
Thanks Sphinx, I will check it out. But I also want to learn jquery. I don't understand it :/ – Kalle Commented Jun 23, 2018 at 9:42

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

Found the answer at this guys git:

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

Huge thanks to the guy, Alex!

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - jQuery drag and drop table column - Stack Overflow

Edit

Edit

1 Answer 1

与本文相关的文章

评论列表(0)