| 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);
|
|
bsw/jbe@1309
|
27 draggedElement.style.width = originalElement.clientWidth + "px";
|
|
bsw/jbe@1309
|
28 draggedElement.style.height = originalElement.clientHeight + "px";
|
|
bsw/jbe@1309
|
29 draggedElement.style.left = originalElement.offsetLeft + "px";
|
|
bsw/jbe@1309
|
30 draggedElement.style.top = originalElement.offsetTop + "px";
|
|
jbe@945
|
31 mouseOffsetX = mouseX;
|
|
jbe@945
|
32 mouseOffsetY = mouseY;
|
|
jbe@945
|
33 dropFunc = func;
|
|
jbe@945
|
34 };
|
|
jbe@945
|
35 window.addEventListener("mousemove", function(event) {
|
|
jbe@945
|
36 jsProtect(function() {
|
|
jbe@945
|
37 mouseX = event.pageX;
|
|
jbe@945
|
38 mouseY = event.pageY;
|
|
jbe@945
|
39 if (draggedElement) {
|
|
bsw/jbe@1309
|
40 draggedElement.style.left = elementOffsetX + mouseX - mouseOffsetX + "px";
|
|
bsw/jbe@1309
|
41 draggedElement.style.top = elementOffsetY + mouseY - mouseOffsetY + "px";
|
|
jbe@945
|
42 }
|
|
jbe@945
|
43 });
|
|
jbe@945
|
44 }, true);
|
|
jbe@945
|
45 var mouseDrop = function(event) {
|
|
jbe@945
|
46 jsProtect(function() {
|
|
jbe@945
|
47 if (draggedElement) {
|
|
jbe@945
|
48 dropFunc(
|
|
jbe@945
|
49 originalElement,
|
|
jbe@945
|
50 elementOffsetX + mouseX - mouseOffsetX,
|
|
jbe@945
|
51 elementOffsetY + mouseY - mouseOffsetY
|
|
jbe@945
|
52 );
|
|
jbe@945
|
53 originalElement.style.visibility = '';
|
|
jbe@945
|
54 draggedElement.parentNode.removeChild(draggedElement);
|
|
jbe@945
|
55 originalElement = null;
|
|
jbe@945
|
56 draggedElement = null;
|
|
jbe@945
|
57 }
|
|
jbe@945
|
58 });
|
|
jbe@945
|
59 };
|
|
jbe@945
|
60 window.addEventListener("mouseup", mouseDrop, true);
|
|
jbe@945
|
61 window.addEventListener("mousedown", mouseDrop, true);
|
|
jbe@945
|
62 var elements = document.getElementsByTagName("*");
|
|
jbe@945
|
63 for (var i=0; i<elements.length; i++) {
|
|
jbe@945
|
64 var element = elements[i];
|
|
jbe@945
|
65 if (element.className == "movable") {
|
|
jbe@945
|
66 element.addEventListener("mousedown", function(event) {
|
|
jbe@945
|
67 jsProtect(function() {
|
|
jbe@945
|
68 event.target.style.cursor = "move";
|
|
jbe@945
|
69 dragElement(event.currentTarget, function(element, dropX, dropY) {
|
|
jbe@945
|
70 event.target.style.cursor = '';
|
|
jbe@945
|
71 elementDropped(element, dropX, dropY);
|
|
jbe@945
|
72 });
|
|
jbe@945
|
73 event.preventDefault();
|
|
jbe@945
|
74 });
|
|
jbe@945
|
75 }, false);
|
|
bsw/jbe@1309
|
76 } else if (element.classList.contains("clickable")) {
|
|
jbe@945
|
77 element.addEventListener("mousedown", function(event) {
|
|
jbe@945
|
78 jsProtect(function() {
|
|
jbe@945
|
79 event.stopPropagation();
|
|
jbe@945
|
80 });
|
|
jbe@945
|
81 }, false);
|
|
jbe@945
|
82 }
|
|
bsw@519
|
83 }
|
|
jbe@945
|
84 });
|
|
bsw@519
|
85 }, false);
|
|
jbe@945
|
86 });
|