html5 drag and drop test

by Soviut

HTML

<table>
  <thead>
    <tr>
      <th>First Column</th>
      <th>Second Column</th>
      <th>Third Column</th>
    </tr>
  </thead>

  <tbody>
    <tr id="1" draggable="true">
      <td>A1</td>
      <td>B1</td>
      <td>C1</td>
    </tr>
    <tr id="2" draggable="true">
      <td>A2</td>
      <td>B2</td>
      <td>C2</td>
    </tr>
    <tr id="3" draggable="true">
      <td>A3</td>
      <td>B3</td>
      <td>C3</td>
    </tr>
    <tr id="4" draggable="true">
      <td>A4</td>
      <td>B4</td>
      <td>C4</td>
    </tr>
    <tr id="5" draggable="true">
      <td>A5</td>
      <td>B5</td>
      <td>C5</td>
    </tr>
  </tbody>
</table>

CSS

body {
  font-family: arial, helvetica, san-serif;
}

table {
  width: 100%;
  border: solid 1px #CCC;
  border-collapse: collapse;
}

thead {
  border-bottom: solid 1px #CCC;
  background: #EEE;
}

th {
  text-align: left;
}

tr + tr {
  border-top: solid 1px #CCC;
}

th, td {
  padding: 10px;
}

[draggable] {
  cursor: move;
}

JavaScript

let rows = document.querySelectorAll('[draggable]');

rows.forEach(row => {
	row.addEventListener('dragstart', function(e) {
  	console.log('started', this)
    e.dataTransfer.setData('text/plain', this.id);
  }, false)
  
	row.addEventListener('dragover', function(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
  }, false)

  row.addEventListener('drop', function(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    let data = e.dataTransfer.getData('text');
    let dragged = document.getElementById(data);
    console.log(e);
    this.parentNode.insertBefore(dragged, this.nextSibling);
  }, false)
  
})