jQuery drag and drop table column

Question

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: https://akottr.github.io/dragtable/

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>

Do you have any code of your best try to show? Or you're seeking for a tutorial on how to? — Roko C. Buljan
– 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.com/docs/4.1/content/tables So, I haven't anything else on my index page other than that example there. — Kalle
– Kalle, Commented Jun 22, 2018 at 22:23
If you'd like to implement drag/drop by yourself, check Javascript MDN: DragEvent — Sphinx
– 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
– Kalle, Commented Jun 23, 2018 at 9:42

Kalle · Accepted Answer · 2018-06-24 01:34:15Z

3

Found the answer at this guys git:

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

Huge thanks to the guy, Alex!

answered Jun 24, 2018 at 1:34

Kalle

1331 gold badge2 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SirPilan Over a year ago

nice one, i like it :)

Collectives™ on Stack Overflow

jQuery drag and drop table column

Edit

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related