better dragging

app/phrases/phrase_edit.php

@@ -510,6 +510,8 @@
 	echo "<tr>";
 	echo "<td class='vncell' valign='top'>".$text['label-structure']."</td>";
 	echo "<td class='vtable' align='left'>";
+	//style for dragging rows
+	echo "  <link rel=stylesheet href='resources/styles/phrase_edit.css' />";
 	//structure table
 	echo "	<table border='0' cellpadding='0' cellspacing='0' id='phrases_table'>\n";
 	//headings
@@ -568,8 +570,10 @@
 //	}
 //	unset($phrase_details, $field);
 //*/
-	echo "<tr id='recordings_row' draggable=true>\n";
-	echo "	<td style='border-bottom: none;' nowrap='nowrap'><div display: grid; place-items: center; height: 100px; border: 1px solid black;><span class='fa-solid fa-arrows-up-down'>&nbsp;</span></div></td>";
+
+	//draggable row
+	echo "<tr class='draggable-row' id='recordings_row' draggable=true>\n";
+	echo "	<td style='border-bottom: none;' nowrap='nowrap'><center><span class='fa-solid fa-arrows-up-down'></span></center></td>";
 	echo "	<td class='vtable' style='border-bottom: none;' align='left' nowrap='nowrap'>\n";
 	echo "		<select name='phrase_detail_function' id='phrase_detail_function' class='formfld' onchange=\"load_action_options(this.selectedIndex);\">\n";
 	echo "			<option value='play-file'>".$text['label-play']."</option>\n";

app/phrases/resources/javascript/phrase_edit.js

@@ -30,54 +30,32 @@ function add_draggable_rows() {
 	const tableBody = document.getElementById('structure');
 	let draggedRow = null;
 
-	tableBody.querySelectorAll('tr').forEach((row) => {
-		// Make rows draggable
-		row.setAttribute('draggable', 'true');
-
-		// When dragging starts
-		row.addEventListener('dragstart', (e) => {
-			draggedRow = row;
-			e.dataTransfer.effectAllowed = 'move';
-			e.dataTransfer.setData('text/plain', row.rowIndex);
-
-			// Highlight the dragged row
-			row.style.backgroundColor = '#d1e7fd'; // Light blue color
-			row.style.opacity = '0.8'; // Slightly transparent for visual feedback
-		});
-
-		// When dragging ends
-		row.addEventListener('dragend', () => {
-			draggedRow = null;
-
-			// Clear the background color
-			row.style.backgroundColor = '';
-			row.style.opacity = '1'; // Reset opacity
-		});
-
-		// Allow drop (prevent default behavior)
-		row.addEventListener('dragover', (e) => {
-			e.preventDefault();
-		});
-
-		// Handle drop
-		row.addEventListener('drop', (e) => {
-			e.preventDefault();
-
-			if (draggedRow && draggedRow !== row) {
-				// Insert the dragged row before the row it is dropped onto
-				tableBody.insertBefore(draggedRow, row.nextSibling || row);
-			}
-		});
-
-		// Optional: Highlight drop target
-		row.addEventListener('dragenter', () => {
-			row.style.backgroundColor = '#f0f0f0'; // Light gray for drop target
-		});
-
-		row.addEventListener('dragleave', () => {
-			row.style.backgroundColor = ''; // Clear drop target highlight
-		});
+	// Add drag-and-drop functionality
+	tableBody.addEventListener('dragstart', (e) => {
+		draggedRow = e.target;
+		e.target.classList.add('dragging');
 	});
+
+	tableBody.addEventListener('dragover', (e) => {
+		e.preventDefault();
+		const targetRow = e.target.closest('tr');
+		if (targetRow && targetRow !== draggedRow) {
+			const bounding = targetRow.getBoundingClientRect();
+			const offset = e.clientY - bounding.top;
+			if (offset > bounding.height / 2) {
+				targetRow.parentNode.insertBefore(draggedRow, targetRow.nextSibling);
+			} else {
+				targetRow.parentNode.insertBefore(draggedRow, targetRow);
+			}
+		}
+	});
+
+	tableBody.addEventListener('dragend', () => {
+		draggedRow.classList.remove('dragging');
+		draggedRow = null;
+		//updateOrder();
+	});
+
 }
 
 
@@ -85,8 +63,8 @@ function add_draggable_rows() {
 function add_row() {
 	const tbody = document.getElementById('structure');
 	const newRow = document.getElementById('recordings_row').cloneNode(true);
-	newRow.id = `row_${tbody.childElementCount}`;
-	newRow.name = `recordings[${tbody.childElementCount}]`;
+	newRow.id = 'row_' + tbody.childElementCount
+	newRow.name = 'recordings_' + tbody.childElementCount;
 
 	tbody.appendChild(newRow);
 

app/phrases/resources/styles/phrase_edit.css

@@ -0,0 +1,11 @@
+.draggable-row {
+    cursor: move;
+}
+
+.dragging {
+    opacity: 0.5;
+}
+
+.target-background {
+	background-color: #ffc107;
+}