FANMixco/draggable_table.html

## draggable_table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Table with Buttons</title>
<style>
  body {
    color: black;
    font-size: 25px;
  }
  td, th {
    border: 1px solid black;
    border-collapse: collapse;
    cursor: all-scroll;
  }
  table {
    border-collapse: collapse;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ and Edge */
    user-select: none; /* Standard syntax */
    margin: 0 auto;
  }
  .btn {
    cursor: pointer;
  }
</style>
</head>
<body>

<table>
  <thead>
    <tr>
      <th>EMAIL</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <tr draggable="true" ondragstart="start(event)" ondragover="dragover(event)">
      <td>jhon@gmail.com</td>
      <td>
        <button class="btn move-up">Up</button>
        <button class="btn move-down">Down</button>
        <button class="btn delete">Delete</button>
      </td>
    </tr>
    <tr draggable="true" ondragstart="start(event)" ondragover="dragover(event)">
      <td>marygirl@yahoo.com</td>
      <td>
        <button class="btn move-up">Up</button>
        <button class="btn move-down">Down</button>
        <button class="btn delete">Delete</button>
      </td>
    </tr>
    <tr draggable="true" ondragstart="start(event)" ondragover="dragover(event)">
      <td>cha24@yahoo.com</td>
      <td>
        <button class="btn move-up">Up</button>
        <button class="btn move-down">Down</button>
        <button class="btn delete">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

<script>
document.getElementById('table-body').addEventListener('click', function(event) {
  let target = event.target;
  if (target.classList.contains('move-up')) {
    moveUp(target.parentNode.parentNode);
  } else if (target.classList.contains('move-down')) {
    moveDown(target.parentNode.parentNode);
  } else if (target.classList.contains('delete')) {
    deleteRow(target.parentNode.parentNode);
  }
});

var row;
function start(){
  row = event.target;
}

function dragover(){
  var e = event;
  e.preventDefault();

  let children= Array.from(e.target.parentNode.parentNode.children);
  if(children.indexOf(e.target.parentNode)>children.indexOf(row))
    e.target.parentNode.after(row);
  else
    e.target.parentNode.before(row);
}


function moveUp(row) {
  let tbody = row.parentNode;
  if (row.previousElementSibling) {
    tbody.insertBefore(row, row.previousElementSibling);
  }
}

function moveDown(row) {
  let tbody = row.parentNode;
  if (row.nextElementSibling) {
    tbody.insertBefore(row.nextElementSibling, row);
  }
}

function deleteRow(row) {
  let tbody = row.parentNode;
  tbody.removeChild(row);
}
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Draggable Table with Buttons</title>
	<style>
	body {
	color: black;
	font-size: 25px;
	}
	td, th {
	border: 1px solid black;
	border-collapse: collapse;
	cursor: all-scroll;
	}
	table {
	border-collapse: collapse;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10+ and Edge */
	user-select: none; /* Standard syntax */
	margin: 0 auto;
	}
	.btn {
	cursor: pointer;
	}
	</style>
	</head>
	<body>

	<table>
	<thead>
	<tr>
	<th>EMAIL</th>
	<th>Action</th>
	</tr>
	</thead>
	<tbody id="table-body">
	<tr draggable="true" ondragstart="start(event)" ondragover="dragover(event)">
	<td>jhon@gmail.com</td>
	<td>
	<button class="btn move-up">Up</button>
	<button class="btn move-down">Down</button>
	<button class="btn delete">Delete</button>
	</td>
	</tr>
	<tr draggable="true" ondragstart="start(event)" ondragover="dragover(event)">
	<td>marygirl@yahoo.com</td>
	<td>
	<button class="btn move-up">Up</button>
	<button class="btn move-down">Down</button>
	<button class="btn delete">Delete</button>
	</td>
	</tr>
	<tr draggable="true" ondragstart="start(event)" ondragover="dragover(event)">
	<td>cha24@yahoo.com</td>
	<td>
	<button class="btn move-up">Up</button>
	<button class="btn move-down">Down</button>
	<button class="btn delete">Delete</button>
	</td>
	</tr>
	</tbody>
	</table>

	<script>
	document.getElementById('table-body').addEventListener('click', function(event) {
	let target = event.target;
	if (target.classList.contains('move-up')) {
	moveUp(target.parentNode.parentNode);
	} else if (target.classList.contains('move-down')) {
	moveDown(target.parentNode.parentNode);
	} else if (target.classList.contains('delete')) {
	deleteRow(target.parentNode.parentNode);
	}
	});

	var row;
	function start(){
	row = event.target;
	}

	function dragover(){
	var e = event;
	e.preventDefault();

	let children= Array.from(e.target.parentNode.parentNode.children);
	if(children.indexOf(e.target.parentNode)>children.indexOf(row))
	e.target.parentNode.after(row);
	else
	e.target.parentNode.before(row);
	}


	function moveUp(row) {
	let tbody = row.parentNode;
	if (row.previousElementSibling) {
	tbody.insertBefore(row, row.previousElementSibling);
	}
	}

	function moveDown(row) {
	let tbody = row.parentNode;
	if (row.nextElementSibling) {
	tbody.insertBefore(row.nextElementSibling, row);
	}
	}

	function deleteRow(row) {
	let tbody = row.parentNode;
	tbody.removeChild(row);
	}
	</script>

	</body>
	</html>