liquid_feedback_frontend
diff static/js/dragdrop.js @ 945:b865f87ea810
Work on robustification of JavaScript voting
| author | jbe |
|---|---|
| date | Thu Nov 08 13:17:37 2012 +0100 (2012-11-08) |
| parents | 7492497005bd |
| children | 32cc544d5a5b |
line diff
1.1 --- a/static/js/dragdrop.js Tue Nov 06 21:28:25 2012 +0100 1.2 +++ b/static/js/dragdrop.js Thu Nov 08 13:17:37 2012 +0100 1.3 @@ -1,76 +1,85 @@ 1.4 -if (!jsFail) { 1.5 +jsProtect(function() { 1.6 window.addEventListener("load", function(event) { 1.7 - var originalElement; 1.8 - var draggedElement; 1.9 - var mouseX; 1.10 - var mouseY; 1.11 - var mouseOffsetX; 1.12 - var mouseOffsetY; 1.13 - var elementOffsetX; 1.14 - var elementOffsetY; 1.15 - var dropFunc; 1.16 - var dragElement = function(element, func) { 1.17 - //if (typeof(element) == "string") element = document.getElementById(element); 1.18 - originalElement = element; 1.19 - draggedElement = originalElement.cloneNode(true); 1.20 - originalElement.style.visibility = "hidden"; 1.21 - draggedElement.style.margin = 0; 1.22 - draggedElement.style.position = "absolute"; 1.23 - draggedElement.style.left = elementOffsetX = originalElement.offsetLeft; 1.24 - draggedElement.style.top = elementOffsetY = originalElement.offsetTop; 1.25 - draggedElement.style.width = originalElement.clientWidth; 1.26 - draggedElement.style.height = originalElement.clientHeight; 1.27 - draggedElement.style.backgroundColor = "#eee"; 1.28 - draggedElement.style.opacity = 0.8; 1.29 - originalElement.offsetParent.appendChild(draggedElement); 1.30 - // workaround for wrong clientWidth and clientHeight information: 1.31 - draggedElement.style.width = 2*originalElement.clientWidth - draggedElement.clientWidth; 1.32 - draggedElement.style.height = 2*originalElement.clientHeight - draggedElement.clientHeight; 1.33 - mouseOffsetX = mouseX; 1.34 - mouseOffsetY = mouseY; 1.35 - dropFunc = func; 1.36 - }; 1.37 - window.addEventListener("mousemove", function(event) { 1.38 - mouseX = event.pageX; 1.39 - mouseY = event.pageY; 1.40 - if (draggedElement) { 1.41 - draggedElement.style.left = elementOffsetX + mouseX - mouseOffsetX; 1.42 - draggedElement.style.top = elementOffsetY + mouseY - mouseOffsetY; 1.43 + jsProtect(function() { 1.44 + var originalElement; 1.45 + var draggedElement; 1.46 + var mouseX; 1.47 + var mouseY; 1.48 + var mouseOffsetX; 1.49 + var mouseOffsetY; 1.50 + var elementOffsetX; 1.51 + var elementOffsetY; 1.52 + var dropFunc; 1.53 + var dragElement = function(element, func) { 1.54 + //if (typeof(element) == "string") element = document.getElementById(element); 1.55 + originalElement = element; 1.56 + draggedElement = originalElement.cloneNode(true); 1.57 + originalElement.style.visibility = "hidden"; 1.58 + draggedElement.style.margin = 0; 1.59 + draggedElement.style.position = "absolute"; 1.60 + draggedElement.style.left = elementOffsetX = originalElement.offsetLeft; 1.61 + draggedElement.style.top = elementOffsetY = originalElement.offsetTop; 1.62 + draggedElement.style.width = originalElement.clientWidth; 1.63 + draggedElement.style.height = originalElement.clientHeight; 1.64 + draggedElement.style.backgroundColor = "#eee"; 1.65 + draggedElement.style.opacity = 0.8; 1.66 + originalElement.offsetParent.appendChild(draggedElement); 1.67 + // workaround for wrong clientWidth and clientHeight information: 1.68 + draggedElement.style.width = 2*originalElement.clientWidth - draggedElement.clientWidth; 1.69 + draggedElement.style.height = 2*originalElement.clientHeight - draggedElement.clientHeight; 1.70 + mouseOffsetX = mouseX; 1.71 + mouseOffsetY = mouseY; 1.72 + dropFunc = func; 1.73 + }; 1.74 + window.addEventListener("mousemove", function(event) { 1.75 + jsProtect(function() { 1.76 + mouseX = event.pageX; 1.77 + mouseY = event.pageY; 1.78 + if (draggedElement) { 1.79 + draggedElement.style.left = elementOffsetX + mouseX - mouseOffsetX; 1.80 + draggedElement.style.top = elementOffsetY + mouseY - mouseOffsetY; 1.81 + } 1.82 + }); 1.83 + }, true); 1.84 + var mouseDrop = function(event) { 1.85 + jsProtect(function() { 1.86 + if (draggedElement) { 1.87 + dropFunc( 1.88 + originalElement, 1.89 + elementOffsetX + mouseX - mouseOffsetX, 1.90 + elementOffsetY + mouseY - mouseOffsetY 1.91 + ); 1.92 + originalElement.style.visibility = ''; 1.93 + draggedElement.parentNode.removeChild(draggedElement); 1.94 + originalElement = null; 1.95 + draggedElement = null; 1.96 + } 1.97 + }); 1.98 + }; 1.99 + window.addEventListener("mouseup", mouseDrop, true); 1.100 + window.addEventListener("mousedown", mouseDrop, true); 1.101 + var elements = document.getElementsByTagName("*"); 1.102 + for (var i=0; i<elements.length; i++) { 1.103 + var element = elements[i]; 1.104 + if (element.className == "movable") { 1.105 + element.addEventListener("mousedown", function(event) { 1.106 + jsProtect(function() { 1.107 + event.target.style.cursor = "move"; 1.108 + dragElement(event.currentTarget, function(element, dropX, dropY) { 1.109 + event.target.style.cursor = ''; 1.110 + elementDropped(element, dropX, dropY); 1.111 + }); 1.112 + event.preventDefault(); 1.113 + }); 1.114 + }, false); 1.115 + } else if (element.className == "clickable") { 1.116 + element.addEventListener("mousedown", function(event) { 1.117 + jsProtect(function() { 1.118 + event.stopPropagation(); 1.119 + }); 1.120 + }, false); 1.121 + } 1.122 } 1.123 - }, true); 1.124 - var mouseDrop = function(event) { 1.125 - if (draggedElement) { 1.126 - dropFunc( 1.127 - originalElement, 1.128 - elementOffsetX + mouseX - mouseOffsetX, 1.129 - elementOffsetY + mouseY - mouseOffsetY 1.130 - ); 1.131 - originalElement.style.visibility = ''; 1.132 - draggedElement.parentNode.removeChild(draggedElement); 1.133 - originalElement = null; 1.134 - draggedElement = null; 1.135 - } 1.136 - }; 1.137 - window.addEventListener("mouseup", mouseDrop, true); 1.138 - window.addEventListener("mousedown", mouseDrop, true); 1.139 - var elements = document.getElementsByTagName("*"); 1.140 - for (var i=0; i<elements.length; i++) { 1.141 - var element = elements[i]; 1.142 - if (element.className == "movable") { 1.143 - element.addEventListener("mousedown", function(event) { 1.144 - event.target.style.cursor = "move"; 1.145 - dragElement(event.currentTarget, function(element, dropX, dropY) { 1.146 - event.target.style.cursor = ''; 1.147 - elementDropped(element, dropX, dropY); 1.148 - }); 1.149 - event.preventDefault(); 1.150 - }, false); 1.151 - } else if (element.className == "clickable") { 1.152 - element.addEventListener("mousedown", function(event) { 1.153 - event.stopPropagation(); 1.154 - }, false); 1.155 - } 1.156 - } 1.157 + }); 1.158 }, false); 1.159 - 1.160 -} 1.161 \ No newline at end of file 1.162 +});