From 4ae66c9fe069e90f96408c3bfa5554faf5a37c6d Mon Sep 17 00:00:00 2001
From: Bent Bisballe Nyeng <deva@aasimon.org>
Date: Thu, 22 Mar 2012 10:32:04 +0100
Subject: Highlight drop targets on mouse over.

---
 munia.html | 42 +++++++++++++++++++++++++-----------------
 proto.js   | 35 ++++++++++++++++++++++++-----------
 2 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/munia.html b/munia.html
index 2c736df..260abc9 100644
--- a/munia.html
+++ b/munia.html
@@ -4,28 +4,35 @@
   <title>Munia</title>
 <style>
 body {
-cursor: default;
+  cursor: default;
 }
 
 .task {
--webkit-touch-callout: none;
--webkit-user-select: none;
--khtml-user-select: none;
--moz-user-select: none;
--ms-user-select: none;
--o-user-select: none;
-user-select: none;
-cursor: move;
-background-color: grey;
-border-style: solid;
-border-width: medium;
-border-radius: 15px;
-padding: 4px;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+  cursor: move;
+  background-color: grey;
+  border-style: solid;
+  border-width: medium;
+  border-radius: 15px;
+  padding: 4px;
+  margin: 6px;
 }
 
-.task:hover
-{ 
-background-color:yellow;
+.task:hover { 
+  background-color:yellow;
+}
+
+.board {
+  background-color: #666;
+  width: *;
+  min-height: 300px;
+  padding: 20px;
 }
 </style>
 </head>
@@ -35,6 +42,7 @@ background-color:yellow;
 <input type="button" value="submit" onclick="submit()"/>
 <div id="wslm_lastmsg"></div>
 </div>
+<div id="board" class="board"></div>
 <script type="text/javascript" charset="utf-8" src="/proto.js"></script>
 
 </body>
diff --git a/proto.js b/proto.js
index 2c29cde..c21ec5e 100644
--- a/proto.js
+++ b/proto.js
@@ -96,9 +96,11 @@ var socket_lm;
 var color = "#000000";
 var dragged = "";
 
-document.body.setAttribute("ondrop", "dropInBody(event)");
-document.body.setAttribute("ondragenter", "return false");
-document.body.setAttribute("ondragover", "return false");
+var board = document.getElementById("board");
+board.setAttribute("ondrop", "dropInBody(event)");
+board.setAttribute("ondragover", "return false");
+board.setAttribute("ondragenter", "return dragenter(this)");
+board.setAttribute("ondragleave", "return dragleave(this)");
 
 
 if (BrowserDetect.browser == "Firefox") {
@@ -155,8 +157,8 @@ try {
       if(cmd == "del") {
         var id = msg[1];
         var task = document.getElementById("task_" + id);
-        //todo: remove from parent not body
-	document.body.removeChild(task);
+        //todo: remove from parent not board
+        board.removeChild(task);
       }
       else if(cmd == "move") {
         var id = msg[1];
@@ -169,10 +171,10 @@ try {
 	        parent_task.appendChild(task);
         }
         else {
-          document.body.appendChild(task);
+          board.appendChild(task);
         }
 //	task.parentNode.removeChild(task);
-//	document.body.removeChild(task);
+//	board.removeChild(task);
 //	parent_task.appendChild(task);
 //        task.style.left = left + "px";
 //        task.style.top = top + "px";
@@ -187,9 +189,10 @@ try {
         task.name = "task";
         task.setAttribute("class", "task");
         task.setAttribute("ondrop", "drop(this, event)");
-        task.setAttribute("ondragenter", "return false");
+        task.setAttribute("ondragenter", "return dragenter(this)");
+        task.setAttribute("ondragleave", "return dragleave(this)");
         task.setAttribute("ondragover", "return false");
-	task.setAttribute("draggable", true);
+        task.setAttribute("draggable", true);
         task.setAttribute("ondragstart", "drag(this, event)");
 
 	task.id = "task_" + id;
@@ -210,7 +213,7 @@ try {
 //        dlButton.setAttribute("onclick", "deleteTask(" + id +")");
 //        task.appendChild(dlButton);
 
-//        document.body.appendChild(task);
+//        board.appendChild(task);
       	
         var parent_task = document.getElementById("task_" + parent_id);
 
@@ -218,7 +221,7 @@ try {
           parent_task.appendChild(task);
 	}
 	else {
-          document.body.appendChild(task);
+          board.appendChild(task);
 	}
       }
       else if(cmd == "update") {
@@ -317,6 +320,16 @@ function drop(target, e) {
 //  target.appendChild(task);
 }
 
+function dragenter(obj) {
+  obj.style.backgroundColor = 'red';
+  return false;
+}
+
+function dragleave(obj) {
+  obj.style.backgroundColor = 'grey';
+  return false;
+}
+
 function dropInBody(e) {
   e.preventDefault();
   e.stopPropagation();
-- 
cgit v1.2.3