| 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 });
 |