1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/static/js/dragdrop.js	Fri Dec 25 12:00:00 2009 +0100
     1.3 @@ -0,0 +1,73 @@
     1.4 +window.addEventListener("load", function(event) {
     1.5 +  var originalElement;
     1.6 +  var draggedElement;
     1.7 +  var mouseX;
     1.8 +  var mouseY;
     1.9 +  var mouseOffsetX;
    1.10 +  var mouseOffsetY;
    1.11 +  var elementOffsetX;
    1.12 +  var elementOffsetY;
    1.13 +  var dropFunc;
    1.14 +  var dragElement = function(element, func) {
    1.15 +    //if (typeof(element) == "string") element = document.getElementById(element);
    1.16 +    originalElement = element;
    1.17 +    draggedElement = originalElement.cloneNode(true);
    1.18 +    originalElement.style.visibility = "hidden";
    1.19 +    draggedElement.style.margin = 0;
    1.20 +    draggedElement.style.position = "absolute";
    1.21 +    draggedElement.style.left = elementOffsetX = originalElement.offsetLeft;
    1.22 +    draggedElement.style.top  = elementOffsetY = originalElement.offsetTop;
    1.23 +    draggedElement.style.width  = originalElement.clientWidth;
    1.24 +    draggedElement.style.height = originalElement.clientHeight;
    1.25 +    draggedElement.style.backgroundColor = "#eee";
    1.26 +    draggedElement.style.opacity = 0.8;
    1.27 +    originalElement.offsetParent.appendChild(draggedElement);
    1.28 +    // workaround for wrong clientWidth and clientHeight information:
    1.29 +    draggedElement.style.width = 2*originalElement.clientWidth - draggedElement.clientWidth;
    1.30 +    draggedElement.style.height = 2*originalElement.clientHeight - draggedElement.clientHeight;
    1.31 +    mouseOffsetX = mouseX;
    1.32 +    mouseOffsetY = mouseY;
    1.33 +    dropFunc = func;
    1.34 +  };
    1.35 +  window.addEventListener("mousemove", function(event) {
    1.36 +    mouseX = event.pageX;
    1.37 +    mouseY = event.pageY;
    1.38 +    if (draggedElement) {
    1.39 +      draggedElement.style.left = elementOffsetX + mouseX - mouseOffsetX;
    1.40 +      draggedElement.style.top  = elementOffsetY + mouseY - mouseOffsetY;
    1.41 +    }
    1.42 +  }, true);
    1.43 +  var mouseDrop = function(event) {
    1.44 +    if (draggedElement) {
    1.45 +      dropFunc(
    1.46 +        originalElement,
    1.47 +        elementOffsetX + mouseX - mouseOffsetX,
    1.48 +        elementOffsetY + mouseY - mouseOffsetY
    1.49 +      );
    1.50 +      originalElement.style.visibility = '';
    1.51 +      draggedElement.parentNode.removeChild(draggedElement);
    1.52 +      originalElement = null;
    1.53 +      draggedElement = null;
    1.54 +    }
    1.55 +  };
    1.56 +  window.addEventListener("mouseup",   mouseDrop, true);
    1.57 +  window.addEventListener("mousedown", mouseDrop, true);
    1.58 +  var elements = document.getElementsByTagName("*");
    1.59 +  for (var i=0; i<elements.length; i++) {
    1.60 +    var element = elements[i];
    1.61 +    if (element.className == "movable") {
    1.62 +      element.addEventListener("mousedown", function(event) {
    1.63 +        event.target.style.cursor = "move";
    1.64 +        dragElement(event.currentTarget, function(element, dropX, dropY) {
    1.65 +          event.target.style.cursor = null;
    1.66 +          elementDropped(element, dropX, dropY);
    1.67 +        });
    1.68 +        event.preventDefault();
    1.69 +      }, false);
    1.70 +    } else if (element.className == "clickable") {
    1.71 +      element.addEventListener("mousedown", function(event) {
    1.72 +        event.stopPropagation();
    1.73 +      }, false);
    1.74 +    }
    1.75 +  }
    1.76 +}, false);