JS: Add support for re-ordering using the mouse.

3 files changed, 91 insertions, 15 deletions

diff --git a/src/ws/munia.css b/src/ws/munia.css
index 5d98c94..ad7b7fd 100644
--- a/src/ws/munia.css
+++ b/src/ws/munia.css
@@ -22,12 +22,13 @@ body
 	-o-user-select: none;
 	user-select: none;
 	cursor: move;
-	background-color: #888;
+	background-color: #aaa;
 	border-style: solid;
-	border-width: medium;
-	/*border-radius: 15px;*/
-	padding: 4px;
-	margin: 6px;
+	border-width: 1px;
+	border-color: black;
+	border-radius: 3px;
+	padding: 6px;
+	margin: 10px;
 	max-width: 300px;
 }
 
diff --git a/src/ws/node.js b/src/ws/node.js
index e9d68b6..6abc8b2 100644
--- a/src/ws/node.js
+++ b/src/ws/node.js
@@ -118,8 +118,10 @@ Node.prototype.create = function()
 	node.setAttribute("class", "node");
 	node.setAttribute("ondblclick", "editTitle(this, event)");
 	//node.setAttribute("onclick", "showHideChildren(this, event)");
-	node.setAttribute("ondrop", "drop(this, event)");
-	node.setAttribute("ondragover", "return false");
+	node.setAttribute("ondrop", "drop(event)");
+	node.setAttribute("ondragenter", "dragenter(event)");
+	node.setAttribute("ondragover", "dragover(event)");
+	node.setAttribute("ondragleave", "dragleave(event)");
 	node.setAttribute("draggable", true);
 	node.setAttribute("ondragstart", "drag(this, event)");
 	node.setAttribute("ondragend", "dragEnd(event)");
@@ -151,6 +153,8 @@ Node.prototype.create = function()
 
 	this.element.appendChild(this.div_id);
 	var id_txt = document.createTextNode(this.id);
+	this.div_id.style.padding = "5px";
+	this.div_id.style.opacity = "0.3";
 	this.div_id.appendChild(id_txt);
 
 	this.element.appendChild(this.div_title);
diff --git a/src/ws/view.js b/src/ws/view.js
index 4e2d837..4a10386 100644
--- a/src/ws/view.js
+++ b/src/ws/view.js
@@ -49,6 +49,28 @@ function deleteNode(id)
 	remove(id);
 }
 
+function getElementAfter(e)
+{
+	var element_after = null;
+	var min_y_diff = 9999999999999;
+	for(i = 0; i < e.target.children.length; ++i)
+	{
+		if(e.target.children[i].className != "node") // Only look at node elements
+		{
+			continue;
+		}
+
+		var y_diff = e.target.children[i].getBoundingClientRect().y - e.y;
+		if(y_diff > 0 && y_diff < min_y_diff)
+		{
+			element_after = e.target.children[i];
+			min_y_diff = y_diff;
+		}
+	}
+
+	return element_after;
+}
+
 function drag(target, e)
 {
 	e.dataTransfer.setData('id', target.id);
@@ -56,8 +78,47 @@ function drag(target, e)
 	update(idFromStr(target.id), "dragged", "true");
 }
 
+function dragenter(e)
+{
+	e.target.style.backgroundColor = "#646588";
+	last_over = e.target;
+}
+
+var last_after = null;
+function dragover(e)
+{
+	e.preventDefault();
+
+	var after = getElementAfter(e);
+	if(last_after != null)
+	{
+		last_after.style.borderColor = "black";
+	}
+	after.style.borderColor = "red black black black";
+	last_after = after;
+}
+
+function dragleave(e)
+{
+	e.target.style.backgroundColor = "#aaa";
+}
+
 function dragEnd(e)
 {
+	e.target.style.backgroundColor = "#aaa";
+
+	if(last_after != null)
+	{
+		last_after.style.borderColor = "black";
+		last_after = null;
+	}
+
+	if(last_over != null)
+	{
+		last_over.style.backgroundColor = "#aaa";
+		last_over = null;
+	}
+
 	e.preventDefault();
 	e.stopPropagation();
 
@@ -66,14 +127,24 @@ function dragEnd(e)
 	update(idFromStr(id), "dragged", "false");
 }
 
-function drop(target, e)
+function drop(e)
 {
-	e.preventDefault();
-	e.stopPropagation();
-
 	var id = e.dataTransfer.getData('id');
 	update(idFromStr(id), "dragged", "false");
-	move(idFromStr(id), idFromStr(target.id), -1);
+
+	// Prevent dropping on item itself
+	if(id == e.target.id)
+	{
+		return;
+	}
+
+	var before_id = -1;
+	var element_after = getElementAfter(e);
+	if(element_after != null)
+	{
+		before_id = idFromStr(element_after.id);
+	}
+	move(idFromStr(id), idFromStr(e.target.id), before_id);
 }
 
 function subscribeMe(target, e)
@@ -95,15 +166,15 @@ function showHideChildren(target, e)
 	if(target.style.backgroundColor != "red")
 	{
 		target.style.backgroundColor = "red";
-		for(var i = 1; i < target.childNodes.length; i++)
+		for(i = 1; i < target.childNodes.length; i++)
 		{
 			target.childNodes[i].style.display = "none";
 		}
 	}
 	else
 	{
-		target.style.backgroundColor = "grey";
-		for(var i = 1; i < target.childNodes.length; i++)
+		target.style.backgroundColor = "#aaa";
+		for(i = 1; i < target.childNodes.length; i++)
 		{
 			target.childNodes[i].style.display = "block";
 		}