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