FANMixco/draggable_table_static.html

## draggable_table_static.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;
    }

    .static {
      cursor: default;
    }
  </style>
</head>

<body>

  <table>
    <thead>
      <tr>
        <th>EMAIL</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody id="table-body">
      <!-- Static row -->
      <tr class="static">
        <td>Static Content 1</td>
        <td>Static Content 2</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 && !row.previousElementSibling.classList.contains('static')) {
        tbody.insertBefore(row, row.previousElementSibling);
      }
    }

    function moveDown(row) {
      let tbody = row.parentNode;
      if (row.nextElementSibling && !row.nextElementSibling.classList.contains('static')) {
        tbody.insertBefore(row.nextElementSibling, row);
      }
    }

    function deleteRow(row) {
      let tbody = row.parentNode;
      tbody.removeChild(row);
    }

    // Function to generate random email addresses
    function generateRandomEmail() {
      var characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
      var email = '';
      for (var i = 0; i < 10; i++) {
        email += characters.charAt(Math.floor(Math.random() * characters.length));
      }
      return email + '@example.com';
    }

    // Add 20 fake email rows
    for (var i = 0; i < 20; i++) {
      var newRow = document.createElement('tr');
      newRow.draggable = true;
      newRow.innerHTML = '<td>' + generateRandomEmail() + '</td>' +
        '<td>' +
        '<button class="btn move-up">Up</button>' +
        '<button class="btn move-down">Down</button>' +
        '<button class="btn delete">Delete</button>' +
        '</td>';
      document.getElementById('table-body').appendChild(newRow);

      newRow.addEventListener('dragstart', start);
      newRow.addEventListener('dragover', dragover);
    }

    generateRandomEmail();
  </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;
	}

	.static {
	cursor: default;
	}
	</style>
	</head>

	<body>

	<table>
	<thead>
	<tr>
	<th>EMAIL</th>
	<th>Action</th>
	</tr>
	</thead>
	<tbody id="table-body">
	<!-- Static row -->
	<tr class="static">
	<td>Static Content 1</td>
	<td>Static Content 2</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 && !row.previousElementSibling.classList.contains('static')) {
	tbody.insertBefore(row, row.previousElementSibling);
	}
	}

	function moveDown(row) {
	let tbody = row.parentNode;
	if (row.nextElementSibling && !row.nextElementSibling.classList.contains('static')) {
	tbody.insertBefore(row.nextElementSibling, row);
	}
	}

	function deleteRow(row) {
	let tbody = row.parentNode;
	tbody.removeChild(row);
	}

	// Function to generate random email addresses
	function generateRandomEmail() {
	var characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
	var email = '';
	for (var i = 0; i < 10; i++) {
	email += characters.charAt(Math.floor(Math.random() * characters.length));
	}
	return email + '@example.com';
	}

	// Add 20 fake email rows
	for (var i = 0; i < 20; i++) {
	var newRow = document.createElement('tr');
	newRow.draggable = true;
	newRow.innerHTML = '<td>' + generateRandomEmail() + '</td>' +
	'<td>' +
	'<button class="btn move-up">Up</button>' +
	'<button class="btn move-down">Down</button>' +
	'<button class="btn delete">Delete</button>' +
	'</td>';
	document.getElementById('table-body').appendChild(newRow);

	newRow.addEventListener('dragstart', start);
	newRow.addEventListener('dragover', dragover);
	}

	generateRandomEmail();
	</script>

	</body>

	</html>