JS: Dim nodes while they are being dragged.

2 files changed, 32 insertions, 8 deletions

diff --git a/src/ws/node.js b/src/ws/node.js
index f7deaf7..6ff8e50 100644
--- a/src/ws/node.js
+++ b/src/ws/node.js
@@ -105,7 +105,8 @@ Node.prototype.create = function()
 	node.setAttribute("ondragover", "return false");
 	node.setAttribute("draggable", true);
 	node.setAttribute("ondragstart", "drag(this, event)");
-	node.setAttribute("title", this.id);
+	node.setAttribute("ondragend", "dragEnd(event)");
+	node.setAttribute("nodeid", this.id);
 
 	// This is a hack to make it possible to identify the nodeid and
 	// oberveid from the node id alone.
@@ -115,7 +116,7 @@ Node.prototype.create = function()
 	var subscribe_button = document.createElement("div");
 	subscribe_button.name = "subscribe_button";
 	subscribe_button.setAttribute("onclick", "subscribeMe(this, event)");
-	subscribe_button.setAttribute("title", this.id);
+	subscribe_button.setAttribute("nodeid", this.id);
 	subscribe_button.setAttribute("style", "float: left; display: inline-box; width:14px; height: 14px; border: solid green 2px; cursor: pointer;");
 	var txt_plus = document.createTextNode("+");
 	subscribe_button.appendChild(txt_plus);
@@ -124,7 +125,7 @@ Node.prototype.create = function()
 	var unsubscribe_button = document.createElement("div");
 	unsubscribe_button.name = "unsubscribe_button";
 	unsubscribe_button.setAttribute("onclick", "unsubscribeMe(this, event)");
-	unsubscribe_button.setAttribute("title", this.id);
+	unsubscribe_button.setAttribute("nodeid", this.id);
 	unsubscribe_button.setAttribute("style", "float: left; display: inline-box; width:14px; height: 14px; border: solid red 2px; cursor: pointer;");
 	var txt_minus = document.createTextNode("-");
 	unsubscribe_button.appendChild(txt_minus);
@@ -153,4 +154,16 @@ Node.prototype.setAttribute = function(name, value)
 		var title_txt = document.createTextNode(value);
 		this.div_title.appendChild(title_txt);
 	}
+
+	if(name == "dragged")
+	{
+		if(value == "true")
+		{
+			this.element.style.opacity = "0.3";
+		}
+		else
+		{
+			this.element.style.opacity = "1.0";
+		}
+	}
 };
diff --git a/src/ws/view.js b/src/ws/view.js
index 18dfb91..e96ec70 100644
--- a/src/ws/view.js
+++ b/src/ws/view.js
@@ -51,8 +51,19 @@ function deleteNode(id)
 
 function drag(target, e)
 {
-	e.dataTransfer.setData('Text', target.id);
+	e.dataTransfer.setData('id', target.id);
 	e.stopPropagation(); // <--- this fixes the drag target problem
+	update(idFromStr(target.id), "dragged", "true");
+}
+
+function dragEnd(e)
+{
+	e.preventDefault();
+	e.stopPropagation();
+
+	// FIXME: This doesn't seem to work in Chromium 65
+	var id = e.dataTransfer.getData('id');
+	update(idFromStr(id), "dragged", "false");
 }
 
 function drop(target, e)
@@ -60,21 +71,21 @@ function drop(target, e)
 	e.preventDefault();
 	e.stopPropagation();
 
-	var id = e.dataTransfer.getData('Text');
-	var node = document.getElementById(id);
+	var id = e.dataTransfer.getData('id');
+	update(idFromStr(id), "dragged", "false");
 	move(idFromStr(id), idFromStr(target.id));
 }
 
 function subscribeMe(target, e)
 {
 	e.stopPropagation();
-	subscribe(target.title);
+	subscribe(target.nodeid);
 }
 
 function unsubscribeMe(target, e)
 {
 	e.stopPropagation();
-	unsubscribe(target.title);
+	unsubscribe(target.nodeid);
 }
 
 function showHideChildren(target, e)