JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<table id="table" class="draggable-table">
  <thead>
    <th>Name</th>
    <th>Occupation</th>
  </thead>
  <tbody>
    <tr>
      <td>April Douglas</td>
      <td>Health Educator</td>
    </tr>
    <tr>
      <td>Salma Mcbride</td>
      <td>Mental Health Counselor</td>
    </tr>  
    <tr>
      <td>Kassandra Donovan</td>
      <td>Makeup Artists</td>
    </tr> 
    <tr>
      <td>Yosef Hartman</td>
      <td>Theatrical and Performance</td>
    </tr>
    <tr>
      <td>Ronald Mayo</td>
      <td>Plant Etiologist</td>
    </tr>  
    <tr>
      <td>Trey Woolley</td>
      <td>Maxillofacial Surgeon</td>
    </tr>  
  </tbody>
</table>

CSS

.draggable-table {
	position: absolute;
	top: 25%;
	left: 20%;
  width: 60%;
  height: 50%;
  border-collapse: collapse;
  background: white;  
  -webkit-box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.1);  
          }
  
  .draggable-table__drag {
      font-size: .95em;
      font-weight: lighter;
      text-transform: capitalize;    
      position: absolute;
      width: 100%;
      text-indent: 50px;    
      border: 1px solid #f1f1f1;
      z-index: 10;
      cursor: grabbing;
      -webkit-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.05);
              box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.05); 
    
      opacity: 1;
  }  
  th {
      height: 25px;
      font-weight: bold;
      text-transform: capitalize;
      padding: 10px;
      user-select: none;
    }
     td {
        font-size: .95em;
        font-weight: lighter;
        text-transform: capitalize;
        text-indent: 50px;
        padding: 10px;  
        user-select: none;
        border-top: 1px solid whitesmoke;
      }

tr:nth-child(even) {
background-color: white;
}

tr:nth-child(odd) {
background-color: #ffffff;
}  
tr.is-dragging {
        background: yellow;
        }

JavaScript

(function() {
  "use strict";
  
  const table = document.getElementById('table');
  const tbody = table.querySelector('tbody');
  
  var currRow = null,
      dragElem = null,
      mouseDownX = 0,
      mouseDownY = 0,         
      mouseX = 0,
      mouseY = 0,      
      mouseDrag = false;  
  
  function init() {
    bindMouse();
  }
  
  function bindMouse() {
    document.addEventListener('mousedown', (event) => {
      if(event.button != 0) return true;
      
      let target = getTargetRow(event.target);
      if(target) {
        currRow = target;
        addDraggableRow(target);
        currRow.classList.add('is-dragging');


        let coords = getMouseCoords(event);
        mouseDownX = coords.x;
        mouseDownY = coords.y;      

        mouseDrag = true;   
      }
    });
    
    document.addEventListener('mousemove', (event) => {
      if(!mouseDrag) return;
      
      let coords = getMouseCoords(event);
      mouseX = coords.x - mouseDownX;
      mouseY = coords.y - mouseDownY;  
      
      moveRow(mouseX, mouseY);
    });
    
    document.addEventListener('mouseup', (event) => {
      if(!mouseDrag) return;
      
      currRow.classList.remove('is-dragging');
      table.removeChild(dragElem);
      
      dragElem = null;
      mouseDrag = false;
    });    
  }
  
  
  function swapRow(row, index) {
     let currIndex = Array.from(tbody.children).indexOf(currRow),
         row1 = currIndex > index ? currRow : row,
         row2 = currIndex > index ? row : currRow;
         
     tbody.insertBefore(row1, row2);
  }
    
  function moveRow(x, y) {
    dragElem.style.transform = "translate3d(" + x + "px, " + y + "px, 0)";
    
    let	dPos = dragElem.getBoundingClientRect(),
        currStartY = dPos.y, currEndY = currStartY + dPos.height,
        rows = getRows();

    for(var i = 0; i < rows.length; i++) {
      let rowElem = rows[i],
          rowSize = rowElem.getBoundingClientRect(),
          rowStartY = rowSize.y, rowEndY =...