dragDrop tabulka v1

by Petr Haluza

HTML

<table id="table" class="table">
    <thead>
        <tr>
            <th data-type="number">No.</th>
            <th>First name</th>
            <th>Last name</th>
            <th>Date of birth</th>
            <th>Address</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Andrea</td>
            <td>Ross</td>
            <td>1985-12-24</td>
            <td>95945 Rodrick Crossroad</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Penelope</td>
            <td>Mills</td>
            <td>1978-8-11</td>
            <td>81328 Eleazar Fork</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Sarah</td>
            <td>Grant</td>
            <td>1981-5-9</td>
            <td>5050 Boyer Forks</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Vanessa</td>
            <td>Roberts</td>
            <td>1980-9-27</td>
            <td>765 Daryl Street</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Oliver</td>
            <td>Alsop</td>
            <td>1986-10-30</td>
            <td>11424 Ritchie Garden</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Jennifer</td>
            <td>Forsyth</td>
            <td>1983-3-13</td>
            <td>04640 Nader Ramp</td>
        </tr>
        <tr>
            <td>7</td>
            <td>Michelle</td>
            <td>King</td>
            <td>1980-8-29</td>
            <td>272 Alysa Fall</td>
        </tr>
        <tr>
            <td>8</td>
            <td>Steven</td>
            <td>Kelly</td>
            <td>1989-8-6</td>
            <td>5749 Foster Pike</td>
        </tr>
        <tr>
            <td>9</td>
            <td>Julian</td>
            <td>Ferguson</td>
            <td>1981-9-17</td>
            <td>6196 Wilkinson Parkways</td>
        </tr>
        <tr>
            <td>10</td>
            <td>Chloe</td>
            <td>Ince</td>
            <td>1983-10-28</td>
           ...

CSS

.table { border: 1px solid #ccc;    border-collapse: collapse;}
.table th,
.table td {    border: 1px solid #ccc;}
.table th,
.table td {    padding: 0.5rem;}
.draggable {    cursor: move;    user-select: none;}
.placeholder {    background-color: #edf2f7;    border: 2px dashed #cbd5e0;}
.clone-list {    border-left: 1px solid #ccc;    border-top: 1px solid #ccc;    display: flex;}
.clone-table {    border-collapse: collapse;    border: none;}
.clone-table th,
.clone-table td {    border: 1px solid #ccc;    border-left: none;    border-top: none;    padding: 0.5rem;}
.dragging {    background: #fff;    border-left: 1px solid #ccc;    border-top: 1px solid #ccc;    z-index: 999;
}

JavaScript

document.addEventListener('DOMContentLoaded', function () {
    const table = document.getElementById('table');

    let draggingEle;
    let draggingColumnIndex;
    let placeholder;
    let list;
    let isDraggingStarted = false;

    // The current position of mouse relative to the dragging element
    let x = 0;
    let y = 0;

    // Swap two nodes
    const swap = function (nodeA, nodeB) {
        const parentA = nodeA.parentNode;
        const siblingA = nodeA.nextSibling === nodeB ? nodeA : nodeA.nextSibling;

        // Move nodeA to before the nodeB
        nodeB.parentNode.insertBefore(nodeA, nodeB);

        // Move nodeB to before the sibling of nodeA
        parentA.insertBefore(nodeB, siblingA);
    };

    // Check if nodeA is on the left of nodeB
    const isOnLeft = function (nodeA, nodeB) {
        // Get the bounding rectangle of nodes
        const rectA = nodeA.getBoundingClientRect();
        const rectB = nodeB.getBoundingClientRect();

        return rectA.left + rectA.width / 2 < rectB.left + rectB.width / 2;
    };

    const cloneTable = function () {
        const rect = table.getBoundingClientRect();

        list = document.createElement('div');
        list.classList.add('clone-list');
        list.style.position = 'absolute';
        list.style.left = rect.left + 'px';
        list.style.top = rect.top + 'px';
        table.parentNode.insertBefore(list, table);

        // Hide the original table
        table.style.visibility = 'hidden';

        // Get all cells
        const originalCells = [].slice.call(table.querySelectorAll('tbody td'));

        const originalHeaderCells = [].slice.call(table.querySelectorAll('th'));
        const numColumns = originalHeaderCells.length;

        // Loop through the header cells
        originalHeaderCells.forEach(function (headerCell, headerIndex) {
            const width = parseInt(window.getComputedStyle(headerCell).width);

            // Create a new table from given row
           ...