liquid_feedback_frontend
view static/js/dragdrop.js @ 118:93f4e465b50d
add initiator support in delegation
if a delegation is issued from the initiative view, the initiators
from that one are added to the delegation target list. this makes it easier to delegate to the author without the need to add him to the contact list.
if a delegation is issued from the initiative view, the initiators
from that one are added to the delegation target list. this makes it easier to delegate to the author without the need to add him to the contact list.
| author | Daniel Poelzleithner <poelzi@poelzi.org> |
|---|---|
| date | Mon Sep 20 20:32:04 2010 +0200 (2010-09-20) |
| 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);