[ Index ] |
|
Code source de Plume CMS 1.2.2 |
1 /* Drag and drop tools by Tim Taylor. Code is under public license. 2 http://tool-man.org/examples/sorting.html */ 3 4 var Coordinates = { 5 ORIGIN : new Coordinate(0, 0), 6 7 northwestPosition : function(element) { 8 var x = parseInt(element.style.left); 9 var y = parseInt(element.style.top); 10 11 return new Coordinate(isNaN(x) ? 0 : x, isNaN(y) ? 0 : y); 12 }, 13 14 southeastPosition : function(element) { 15 return Coordinates.northwestPosition(element).plus( 16 new Coordinate(element.offsetWidth, element.offsetHeight)); 17 }, 18 19 northwestOffset : function(element, isRecursive) { 20 var offset = new Coordinate(element.offsetLeft, element.offsetTop); 21 22 if (!isRecursive) return offset; 23 24 var parent = element.offsetParent; 25 while (parent) { 26 offset = offset.plus( 27 new Coordinate(parent.offsetLeft, parent.offsetTop)); 28 parent = parent.offsetParent; 29 } 30 return offset; 31 }, 32 33 southeastOffset : function(element, isRecursive) { 34 return Coordinates.northwestOffset(element, isRecursive).plus( 35 new Coordinate(element.offsetWidth, element.offsetHeight)); 36 }, 37 38 fixEvent : function(event) { 39 event.windowCoordinate = new Coordinate(event.clientX, event.clientY); 40 } 41 }; 42 43 function Coordinate(x, y) { 44 this.x = x; 45 this.y = y; 46 } 47 48 Coordinate.prototype.toString = function() { 49 return "(" + this.x + "," + this.y + ")"; 50 } 51 52 Coordinate.prototype.plus = function(that) { 53 return new Coordinate(this.x + that.x, this.y + that.y); 54 } 55 56 Coordinate.prototype.minus = function(that) { 57 return new Coordinate(this.x - that.x, this.y - that.y); 58 } 59 60 Coordinate.prototype.distance = function(that) { 61 var deltaX = this.x - that.x; 62 var deltaY = this.y - that.y; 63 64 return Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2)); 65 } 66 67 Coordinate.prototype.max = function(that) { 68 var x = Math.max(this.x, that.x); 69 var y = Math.max(this.y, that.y); 70 return new Coordinate(x, y); 71 } 72 73 Coordinate.prototype.constrain = function(min, max) { 74 if (min.x > max.x || min.y > max.y) return this; 75 76 var x = this.x; 77 var y = this.y; 78 79 if (min.x != null) x = Math.max(x, min.x); 80 if (max.x != null) x = Math.min(x, max.x); 81 if (min.y != null) y = Math.max(y, min.y); 82 if (max.y != null) y = Math.min(y, max.y); 83 84 return new Coordinate(x, y); 85 } 86 87 Coordinate.prototype.reposition = function(element) { 88 element.style["top"] = this.y + "px"; 89 element.style["left"] = this.x + "px"; 90 } 91 92 Coordinate.prototype.equals = function(that) { 93 if (this == that) return true; 94 if (!that || that == null) return false; 95 96 return this.x == that.x && this.y == that.y; 97 } 98 99 100 /* 101 * drag.js - click & drag DOM elements 102 * 103 * originally based on Youngpup's dom-drag.js, www.youngpup.net 104 */ 105 106 var Drag = { 107 BIG_Z_INDEX : 10000, 108 group : null, 109 isDragging : false, 110 111 makeDraggable : function(group) { 112 group.handle = group; 113 group.handle.group = group; 114 115 group.minX = null; 116 group.minY = null; 117 group.maxX = null; 118 group.maxY = null; 119 group.threshold = 0; 120 group.thresholdY = 0; 121 group.thresholdX = 0; 122 123 group.onDragStart = new Function(); 124 group.onDragEnd = new Function(); 125 group.onDrag = new Function(); 126 127 // TODO: use element.prototype.myFunc 128 group.setDragHandle = Drag.setDragHandle; 129 group.setDragThreshold = Drag.setDragThreshold; 130 group.setDragThresholdX = Drag.setDragThresholdX; 131 group.setDragThresholdY = Drag.setDragThresholdY; 132 group.constrain = Drag.constrain; 133 group.constrainVertical = Drag.constrainVertical; 134 group.constrainHorizontal = Drag.constrainHorizontal; 135 136 group.onmousedown = Drag.onMouseDown; 137 }, 138 139 constrainVertical : function() { 140 var nwOffset = Coordinates.northwestOffset(this, true); 141 this.minX = nwOffset.x; 142 this.maxX = nwOffset.x; 143 }, 144 145 constrainHorizontal : function() { 146 var nwOffset = Coordinates.northwestOffset(this, true); 147 this.minY = nwOffset.y; 148 this.maxY = nwOffset.y; 149 }, 150 151 constrain : function(nwPosition, sePosition) { 152 this.minX = nwPosition.x; 153 this.minY = nwPosition.y; 154 this.maxX = sePosition.x; 155 this.maxY = sePosition.y; 156 }, 157 158 setDragHandle : function(handle) { 159 if (handle && handle != null) 160 this.handle = handle; 161 else 162 this.handle = this; 163 164 this.handle.group = this; 165 this.onmousedown = null; 166 this.handle.onmousedown = Drag.onMouseDown; 167 }, 168 169 setDragThreshold : function(threshold) { 170 if (isNaN(parseInt(threshold))) return; 171 172 this.threshold = threshold; 173 }, 174 175 setDragThresholdX : function(threshold) { 176 if (isNaN(parseInt(threshold))) return; 177 178 this.thresholdX = threshold; 179 }, 180 181 setDragThresholdY : function(threshold) { 182 if (isNaN(parseInt(threshold))) return; 183 184 this.thresholdY = threshold; 185 }, 186 187 onMouseDown : function(event) { 188 event = Drag.fixEvent(event); 189 Drag.group = this.group; 190 191 var group = this.group; 192 var mouse = event.windowCoordinate; 193 var nwOffset = Coordinates.northwestOffset(group, true); 194 var nwPosition = Coordinates.northwestPosition(group); 195 var sePosition = Coordinates.southeastPosition(group); 196 var seOffset = Coordinates.southeastOffset(group, true); 197 198 group.originalOpacity = group.style.opacity; 199 group.originalZIndex = group.style.zIndex; 200 group.initialWindowCoordinate = mouse; 201 // TODO: need a better name, but don't yet understand how it 202 // participates in the magic while dragging 203 group.dragCoordinate = mouse; 204 205 Drag.showStatus(mouse, nwPosition, sePosition, nwOffset, seOffset); 206 207 group.onDragStart(nwPosition, sePosition, nwOffset, seOffset); 208 209 // TODO: need better constraint API 210 if (group.minX != null) 211 group.minMouseX = mouse.x - nwPosition.x + 212 group.minX - nwOffset.x; 213 if (group.maxX != null) 214 group.maxMouseX = group.minMouseX + group.maxX - group.minX; 215 216 if (group.minY != null) 217 group.minMouseY = mouse.y - nwPosition.y + 218 group.minY - nwOffset.y; 219 if (group.maxY != null) 220 group.maxMouseY = group.minMouseY + group.maxY - group.minY; 221 222 group.mouseMin = new Coordinate(group.minMouseX, group.minMouseY); 223 group.mouseMax = new Coordinate(group.maxMouseX, group.maxMouseY); 224 225 document.onmousemove = Drag.onMouseMove; 226 document.onmouseup = Drag.onMouseUp; 227 228 return false; 229 }, 230 231 showStatus : function(mouse, nwPosition, sePosition, nwOffset, seOffset) { 232 window.status = 233 "mouse: " + mouse.toString() + " " + 234 "NW pos: " + nwPosition.toString() + " " + 235 "SE pos: " + sePosition.toString() + " " + 236 "NW offset: " + nwOffset.toString() + " " + 237 "SE offset: " + seOffset.toString(); 238 }, 239 240 onMouseMove : function(event) { 241 event = Drag.fixEvent(event); 242 var group = Drag.group; 243 var mouse = event.windowCoordinate; 244 var nwOffset = Coordinates.northwestOffset(group, true); 245 var nwPosition = Coordinates.northwestPosition(group); 246 var sePosition = Coordinates.southeastPosition(group); 247 var seOffset = Coordinates.southeastOffset(group, true); 248 249 Drag.showStatus(mouse, nwPosition, sePosition, nwOffset, seOffset); 250 251 if (!Drag.isDragging) { 252 if (group.threshold > 0) { 253 var distance = group.initialWindowCoordinate.distance( 254 mouse); 255 if (distance < group.threshold) return true; 256 } else if (group.thresholdY > 0) { 257 var deltaY = Math.abs(group.initialWindowCoordinate.y - mouse.y); 258 if (deltaY < group.thresholdY) return true; 259 } else if (group.thresholdX > 0) { 260 var deltaX = Math.abs(group.initialWindowCoordinate.x - mouse.x); 261 if (deltaX < group.thresholdX) return true; 262 } 263 264 Drag.isDragging = true; 265 group.style["zIndex"] = Drag.BIG_Z_INDEX; 266 group.style["opacity"] = 0.75; 267 } 268 269 // TODO: need better constraint API 270 var adjusted = mouse.constrain(group.mouseMin, group.mouseMax); 271 nwPosition = nwPosition.plus(adjusted.minus(group.dragCoordinate)); 272 nwPosition.reposition(group); 273 group.dragCoordinate = adjusted; 274 275 // once dragging has started, the position of the group 276 // relative to the mouse should stay fixed. They can get out 277 // of sync if the DOM is manipulated while dragging, so we 278 // correct the error here 279 // 280 // TODO: what we really want to do is find the offset from 281 // our corner to the mouse coordinate and adjust to keep it 282 // the same 283 var offsetBefore = Coordinates.northwestOffset(group); 284 group.onDrag(nwPosition, sePosition, nwOffset, seOffset); 285 var offsetAfter = Coordinates.northwestOffset(group); 286 287 if (!offsetBefore.equals(offsetAfter)) { 288 var errorDelta = offsetBefore.minus(offsetAfter); 289 nwPosition = Coordinates.northwestPosition(group).plus(errorDelta); 290 nwPosition.reposition(group); 291 } 292 293 return false; 294 }, 295 296 onMouseUp : function(event) { 297 event = Drag.fixEvent(event); 298 var group = Drag.group; 299 300 var mouse = event.windowCoordinate; 301 var nwOffset = Coordinates.northwestOffset(group, true); 302 var nwPosition = Coordinates.northwestPosition(group); 303 var sePosition = Coordinates.southeastPosition(group); 304 var seOffset = Coordinates.southeastOffset(group, true); 305 306 document.onmousemove = null; 307 document.onmouseup = null; 308 group.onDragEnd(nwPosition, sePosition, nwOffset, seOffset); 309 310 if (Drag.isDragging) { 311 // restoring zIndex before opacity avoids visual flicker in Firefox 312 group.style["zIndex"] = group.originalZIndex; 313 group.style["opacity"] = group.originalOpacity; 314 } 315 316 Drag.group = null; 317 Drag.isDragging = false; 318 319 return false; 320 }, 321 322 fixEvent : function(event) { 323 if (typeof event == 'undefined') event = window.event; 324 Coordinates.fixEvent(event); 325 326 return event; 327 } 328 };
titre
Description
Corps
titre
Description
Corps
titre
Description
Corps
titre
Corps
Généré le : Mon Nov 26 11:57:01 2007 | par Balluche grâce à PHPXref 0.7 |
![]() |