liquid_feedback_frontend
view static/js/dragdrop.js @ 1835:8147173d9a13
Fixed layout of admin page
| author | bsw |
|---|---|
| date | Thu Feb 03 12:43:18 2022 +0100 (2022-02-03) |
| parents | 32cc544d5a5b |
| children |
line source
1 jsProtect(function() {
2 window.addEventListener("load", function(event) {
3 jsProtect(function() {
4 var originalElement;
5 var draggedElement;
6 var mouseX;
7 var mouseY;
8 var mouseOffsetX;
9 var mouseOffsetY;
10 var elementOffsetX;
11 var elementOffsetY;
12 var dropFunc;
13 var dragElement = function(element, func) {
14 //if (typeof(element) == "string") element = document.getElementById(element);
15 originalElement = element;
16 draggedElement = originalElement.cloneNode(true);
17 originalElement.style.visibility = "hidden";
18 draggedElement.style.margin = 0;
19 draggedElement.style.position = "absolute";
20 draggedElement.style.left = elementOffsetX = originalElement.offsetLeft;
21 draggedElement.style.top = elementOffsetY = originalElement.offsetTop;
22 draggedElement.style.width = originalElement.clientWidth;
23 draggedElement.style.height = originalElement.clientHeight;
24 draggedElement.style.backgroundColor = "#eee";
25 draggedElement.style.opacity = 0.8;
26 originalElement.offsetParent.appendChild(draggedElement);
27 draggedElement.style.width = originalElement.clientWidth + "px";
28 draggedElement.style.height = originalElement.clientHeight + "px";
29 draggedElement.style.left = originalElement.offsetLeft + "px";
30 draggedElement.style.top = originalElement.offsetTop + "px";
31 mouseOffsetX = mouseX;
32 mouseOffsetY = mouseY;
33 dropFunc = func;
34 };
35 window.addEventListener("mousemove", function(event) {
36 jsProtect(function() {
37 mouseX = event.pageX;
38 mouseY = event.pageY;
39 if (draggedElement) {
40 draggedElement.style.left = elementOffsetX + mouseX - mouseOffsetX + "px";
41 draggedElement.style.top = elementOffsetY + mouseY - mouseOffsetY + "px";
42 }
43 });
44 }, true);
45 var mouseDrop = function(event) {
46 jsProtect(function() {
47 if (draggedElement) {
48 dropFunc(
49 originalElement,
50 elementOffsetX + mouseX - mouseOffsetX,
51 elementOffsetY + mouseY - mouseOffsetY
52 );
53 originalElement.style.visibility = '';
54 draggedElement.parentNode.removeChild(draggedElement);
55 originalElement = null;
56 draggedElement = null;
57 }
58 });
59 };
60 window.addEventListener("mouseup", mouseDrop, true);
61 window.addEventListener("mousedown", mouseDrop, true);
62 var elements = document.getElementsByTagName("*");
63 for (var i=0; i<elements.length; i++) {
64 var element = elements[i];
65 if (element.className == "movable") {
66 element.addEventListener("mousedown", function(event) {
67 jsProtect(function() {
68 event.target.style.cursor = "move";
69 dragElement(event.currentTarget, function(element, dropX, dropY) {
70 event.target.style.cursor = '';
71 elementDropped(element, dropX, dropY);
72 });
73 event.preventDefault();
74 });
75 }, false);
76 } else if (element.classList.contains("clickable")) {
77 element.addEventListener("mousedown", function(event) {
78 jsProtect(function() {
79 event.stopPropagation();
80 });
81 }, false);
82 }
83 }
84 });
85 }, false);
86 });