liquid_feedback_frontend
view static/js/dragdrop.js @ 172:165f4bd02cf3
don't show the first draft of a new initiative as a new draft event in the timeline
new draft should only show changes of drafts drafts of new initiatives as they are handled by the new initiative event
new draft should only show changes of drafts drafts of new initiatives as they are handled by the new initiative event
| author | Daniel Poelzleithner <poelzi@poelzi.org> |
|---|---|
| date | Sun Oct 10 19:40:32 2010 +0200 (2010-10-10) |
| 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);