Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position Red Dot Based on First Point</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="table-container">
     <table id="Mytable">
          <thead className="bordered-row">
            <tr className="bordered-row">
              <th draggable="true">ID</th>
              <th draggable="true">Nom</th>
              <th draggable="true">Adresse</th>
              <th draggable="true">Type</th>
              <th draggable="true">Categorie</th>
              <th draggable="true">GPS</th>
              <th draggable="true"> Progression</th>
              <th draggable="true" className='plus-container'>button</th>
              <th draggable="true" class="departure-arrival">Départ</th>
              <th draggable="true" class="departure-arrival">Arrivée</th>
              <th draggable="true" >Attribut</th>
              <th draggable="true" className='feed'> Feed </th>
              
            </tr>
          </thead>
          <tbody>
            <tr className="bordered-row">
              <td>#00123</td>
              <td>Nom de tournée</td>
              <td>25 Rue Jean-Jacques...</td>
              <td>Type 1</td>
              <td>Categorie 1</td>
              <td>
                <div className='gps-container'> <span className='place'> 93130,France </span> </div>
              </td>
              <td className='progression'>
                <label className="name"> Noisy-le -Sec </label> <label className='time'> Terminé 05/20 - 124 km </label>
               
              </td>
              <td>points</td>
              <td>14:06</td>
              <td>15:06</td>
              <td>
                <select className="attribute-select">
                  <option value="Attribute 1">Attribut 1</option>
                  <option value="Attribute 2">Attribut 2</option>
                </select>
              </td>
              <td>
               
                <span className="text-with-icon">5</span>
              </td>
              
            </tr>
     
            
          </tbody>
        </table>
</div>
<script type="text/javascript">
     const table = document.getElementById('Mytable');
      let dragData = {};
​
        // Add dragstart event listeners to all draggable <th> elements
        const draggableHeaders = document.querySelectorAll('th[draggable="true"]');
        draggableHeaders.forEach(header => {
            header.addEventListener('dragstart', handleDragStart);
            header.addEventListener('dragover', handleDragOver);
            header.addEventListener('dragenter', handleDragEnter);
            header.addEventListener('dragleave', handleDragLeave);
            header.addEventListener('drop', handleDrop);
            header.addEventListener('dragend', handleDragEnd);
        });
​
        function handleDragStart(event) {
            const columnIndex = Array.from(event.target.parentNode.children).indexOf(event.target);
            dragData = { column: columnIndex };
            event.dataTransfer.setData('text/plain', event.target.outerHTML);
            event.target.classList.add('dragging');
        }
​
        function handleDragOver(event) {
            event.preventDefault();
        }
​
        function handleDragEnter(event) {
            event.preventDefault();
        }
​
        function handleDragLeave(event) {
            event.preventDefault();
        }
​
        function handleDrop(event) {
            event.preventDefault();
            const targetColumnIndex = Array.from(event.target.parentNode.children).indexOf(event.target);
​
            // Swap columns by reordering <th> elements
            const headerRow = table.querySelector('thead tr');
            const headerCells = Array.from(headerRow.children);
            const tempCell = headerCells[dragData.column].cloneNode(true);
            headerCells[dragData.column].innerHTML = headerCells[targetColumnIndex].innerHTML;
            headerCells[targetColumnIndex].innerHTML = tempCell.innerHTML;
​
            // Swap columns by reordering <td> elements
            const rows = table.querySelectorAll('tbody tr');
            rows.forEach(row => {
                const cells = Array.from(row.children);
                const tempContent = cells[dragData.column].innerHTML;
                cells[dragData.column].innerHTML = cells[targetColumnIndex].innerHTML;
                cells[targetColumnIndex].innerHTML = tempContent;
            });
​
            // Reset the dragging state
            event.target.classList.remove('dragging');
        }
​
        function handleDragEnd(event) {
            event.target.classList.remove('dragging');
        }
</script>
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
the-yazpro
0viewers