| rev | line source | 
| jbe@945 | 1 jsProtect(function() { | 
| bsw@519 | 2   window.addEventListener("load", function(event) { | 
| jbe@945 | 3     jsProtect(function() { | 
| jbe@945 | 4       var originalElement; | 
| jbe@945 | 5       var draggedElement; | 
| jbe@945 | 6       var mouseX; | 
| jbe@945 | 7       var mouseY; | 
| jbe@945 | 8       var mouseOffsetX; | 
| jbe@945 | 9       var mouseOffsetY; | 
| jbe@945 | 10       var elementOffsetX; | 
| jbe@945 | 11       var elementOffsetY; | 
| jbe@945 | 12       var dropFunc; | 
| jbe@945 | 13       var dragElement = function(element, func) { | 
| jbe@945 | 14         //if (typeof(element) == "string") element = document.getElementById(element); | 
| jbe@945 | 15         originalElement = element; | 
| jbe@945 | 16         draggedElement = originalElement.cloneNode(true); | 
| jbe@945 | 17         originalElement.style.visibility = "hidden"; | 
| jbe@945 | 18         draggedElement.style.margin = 0; | 
| jbe@945 | 19         draggedElement.style.position = "absolute"; | 
| jbe@945 | 20         draggedElement.style.left = elementOffsetX = originalElement.offsetLeft; | 
| jbe@945 | 21         draggedElement.style.top  = elementOffsetY = originalElement.offsetTop; | 
| jbe@945 | 22         draggedElement.style.width  = originalElement.clientWidth; | 
| jbe@945 | 23         draggedElement.style.height = originalElement.clientHeight; | 
| jbe@945 | 24         draggedElement.style.backgroundColor = "#eee"; | 
| jbe@945 | 25         draggedElement.style.opacity = 0.8; | 
| jbe@945 | 26         originalElement.offsetParent.appendChild(draggedElement); | 
| jbe@945 | 27         // workaround for wrong clientWidth and clientHeight information: | 
| jbe@945 | 28         draggedElement.style.width = 2*originalElement.clientWidth - draggedElement.clientWidth; | 
| jbe@945 | 29         draggedElement.style.height = 2*originalElement.clientHeight - draggedElement.clientHeight; | 
| jbe@945 | 30         mouseOffsetX = mouseX; | 
| jbe@945 | 31         mouseOffsetY = mouseY; | 
| jbe@945 | 32         dropFunc = func; | 
| jbe@945 | 33       }; | 
| jbe@945 | 34       window.addEventListener("mousemove", function(event) { | 
| jbe@945 | 35         jsProtect(function() { | 
| jbe@945 | 36           mouseX = event.pageX; | 
| jbe@945 | 37           mouseY = event.pageY; | 
| jbe@945 | 38           if (draggedElement) { | 
| jbe@945 | 39             draggedElement.style.left = elementOffsetX + mouseX - mouseOffsetX; | 
| jbe@945 | 40             draggedElement.style.top  = elementOffsetY + mouseY - mouseOffsetY; | 
| jbe@945 | 41           } | 
| jbe@945 | 42         }); | 
| jbe@945 | 43       }, true); | 
| jbe@945 | 44       var mouseDrop = function(event) { | 
| jbe@945 | 45         jsProtect(function() { | 
| jbe@945 | 46           if (draggedElement) { | 
| jbe@945 | 47             dropFunc( | 
| jbe@945 | 48               originalElement, | 
| jbe@945 | 49               elementOffsetX + mouseX - mouseOffsetX, | 
| jbe@945 | 50               elementOffsetY + mouseY - mouseOffsetY | 
| jbe@945 | 51             ); | 
| jbe@945 | 52             originalElement.style.visibility = ''; | 
| jbe@945 | 53             draggedElement.parentNode.removeChild(draggedElement); | 
| jbe@945 | 54             originalElement = null; | 
| jbe@945 | 55             draggedElement = null; | 
| jbe@945 | 56           } | 
| jbe@945 | 57         }); | 
| jbe@945 | 58       }; | 
| jbe@945 | 59       window.addEventListener("mouseup",   mouseDrop, true); | 
| jbe@945 | 60       window.addEventListener("mousedown", mouseDrop, true); | 
| jbe@945 | 61       var elements = document.getElementsByTagName("*"); | 
| jbe@945 | 62       for (var i=0; i<elements.length; i++) { | 
| jbe@945 | 63         var element = elements[i]; | 
| jbe@945 | 64         if (element.className == "movable") { | 
| jbe@945 | 65           element.addEventListener("mousedown", function(event) { | 
| jbe@945 | 66             jsProtect(function() { | 
| jbe@945 | 67               event.target.style.cursor = "move"; | 
| jbe@945 | 68               dragElement(event.currentTarget, function(element, dropX, dropY) { | 
| jbe@945 | 69                 event.target.style.cursor = ''; | 
| jbe@945 | 70                 elementDropped(element, dropX, dropY); | 
| jbe@945 | 71               }); | 
| jbe@945 | 72               event.preventDefault(); | 
| jbe@945 | 73             }); | 
| jbe@945 | 74           }, false); | 
| jbe@945 | 75         } else if (element.className == "clickable") { | 
| jbe@945 | 76           element.addEventListener("mousedown", function(event) { | 
| jbe@945 | 77             jsProtect(function() { | 
| jbe@945 | 78               event.stopPropagation(); | 
| jbe@945 | 79             }); | 
| jbe@945 | 80           }, false); | 
| jbe@945 | 81         } | 
| bsw@519 | 82       } | 
| jbe@945 | 83     }); | 
| bsw@519 | 84   }, false); | 
| jbe@945 | 85 }); |