From 4ae66c9fe069e90f96408c3bfa5554faf5a37c6d Mon Sep 17 00:00:00 2001 From: Bent Bisballe Nyeng 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 @@ Munia @@ -35,6 +42,7 @@ background-color:yellow;
+
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