liquid_feedback_frontend
view static/js/dragdrop.js @ 154:6b6c82f9ca9f
speedup member image loading when non set
we can add the location of the default file directy instead of going through another slow request
we can add the location of the default file directy instead of going through another slow request
| author | Daniel Poelzleithner <poelzi@poelzi.org> |
|---|---|
| date | Fri Oct 08 15:25:10 2010 +0200 (2010-10-08) |
| parents | 8d91bccab0bf |
| children | 7492497005bd |
line source
1 window.addEventListener("load", function(event) {
2 var originalElement;
3 var draggedElement;
4 var mouseX;
5 var mouseY;
6 var mouseOffsetX;
7 var mouseOffsetY;
8 var elementOffsetX;
9 var elementOffsetY;
10 var dropFunc;
11 var dragElement = function(element, func) {
12 //if (typeof(element) == "string") element = document.getElementById(element);
13 originalElement = element;
14 draggedElement = originalElement.cloneNode(true);
15 originalElement.style.visibility = "hidden";
16 draggedElement.style.margin = 0;
17 draggedElement.style.position = "absolute";
18 draggedElement.style.left = elementOffsetX = originalElement.offsetLeft;
19 draggedElement.style.top = elementOffsetY = originalElement.offsetTop;
20 draggedElement.style.width = originalElement.clientWidth;
21 draggedElement.style.height = originalElement.clientHeight;
22 draggedElement.style.backgroundColor = "#eee";
23 draggedElement.style.opacity = 0.8;
24 originalElement.offsetParent.appendChild(draggedElement);
25 // workaround for wrong clientWidth and clientHeight information:
26 draggedElement.style.width = 2*originalElement.clientWidth - draggedElement.clientWidth;
27 draggedElement.style.height = 2*originalElement.clientHeight - draggedElement.clientHeight;
28 mouseOffsetX = mouseX;
29 mouseOffsetY = mouseY;
30 dropFunc = func;
31 };
32 window.addEventListener("mousemove", function(event) {
33 mouseX = event.pageX;
34 mouseY = event.pageY;
35 if (draggedElement) {
36 draggedElement.style.left = elementOffsetX + mouseX - mouseOffsetX;
37 draggedElement.style.top = elementOffsetY + mouseY - mouseOffsetY;
38 }
39 }, true);
40 var mouseDrop = function(event) {
41 if (draggedElement) {
42 dropFunc(
43 originalElement,
44 elementOffsetX + mouseX - mouseOffsetX,
45 elementOffsetY + mouseY - mouseOffsetY
46 );
47 originalElement.style.visibility = '';
48 draggedElement.parentNode.removeChild(draggedElement);
49 originalElement = null;
50 draggedElement = null;
51 }
52 };
53 window.addEventListener("mouseup", mouseDrop, true);
54 window.addEventListener("mousedown", mouseDrop, true);
55 var elements = document.getElementsByTagName("*");
56 for (var i=0; i<elements.length; i++) {
57 var element = elements[i];
58 if (element.className == "movable") {
59 element.addEventListener("mousedown", function(event) {
60 event.target.style.cursor = "move";
61 dragElement(event.currentTarget, function(element, dropX, dropY) {
62 event.target.style.cursor = '';
63 elementDropped(element, dropX, dropY);
64 });
65 event.preventDefault();
66 }, false);
67 } else if (element.className == "clickable") {
68 element.addEventListener("mousedown", function(event) {
69 event.stopPropagation();
70 }, false);
71 }
72 }
73 }, false);