1/** 2 * Draggable-Klasse 3 * 4 * @param {String} htmlAreaToDragOnId Die ID des HTML-Elements wodrauf geklickt wird. 5 * @param {String} allUmschliessendesHTMLElementId 6 * @param {String} artId Jedes DropTarget kann eine Art haben. Hat es eine Art können nur DragObjekte 7 * dran gehangen werden, welche die entsprechende Art übergeben bekommen haben. 8 * Hat das DraopTarget keine Art so kann jedes DragElement dran gehangen werden. 9 */ 10var Draggable = function(htmlAreaToDragOnId, allUmschliessendesHTMLElementId, artId) 11{ 12 // das zu bewegende Objekt 13 //Draggable.actualDragObject = null; // statischer Member, welches das Objekt, das sich grade bewegt speichert 14 15 // HTML-Elemente 16 var htmlAreaToDragOn = document.getElementById(htmlAreaToDragOnId); 17 if (htmlAreaToDragOn == null) 18 return; // Wenn es dieses HTML-Element schon nicht gibt, können wir direkt aufhören. 19 20 this.htmlAreaToDragOn = htmlAreaToDragOn; // Das Element was auf den onclick reagieren soll wird als Member angelegt 21 this.htmlAreaToDragOn.parentObject = this; // und bekommt die Referenz auf das eigene Objekt als "nachträglicher" Member 22 //this.areaForSettings; 23 //this.areaForContent; 24 if(allUmschliessendesHTMLElementId) 25 this.rootElement = document.getElementById(allUmschliessendesHTMLElementId); 26 else 27 this.rootElement = this.htmlAreaToDragOn.parentNode; // rootElement ist das Element, was in seiner Gesamtheit bewegt werden soll 28 this.rootElement.parentObject = this; // und bekommt die Referenz auf das eigene Objekt als "nachträglicher" Member 29 this.platzhalter = null; // der Platzhalter welcher angezeigt werden kann 30 31 this.dragAndDropManager = m_DragAndDropManager; 32 //this.htmlAreaToDragOn.onmousedown = this.onMouseDown; 33 this.htmlAreaToDragOn.onmousedown = m_DragAndDropManager.onMouseDown; // Beim mouseDown auf dem dieses Objekts wird der Manager aufgerufen 34 35 36 // Abstände vom Mauszeiger zum Rand 37 this.offsetLeft; // Offset zum Rand des beweglichen Elements 38 this.offsetTop; // Offset zum Rand des beweglichen Elements 39 40 // Die Art zulässiger Container 41 this.artId = artId; // Die Art an welche Container das Draggable gehangen werden kann 42 43 // Hier werden die unrsprünglichen Werte gespeichert, bevor sie beim Bewegen verändert werden müssen 44 this.UrPos = null; // Ursprüngliche Position 45 this.UrStylePosition = null; // Ursprüngliche Positionierungsart 46 this.UrParent = null; // Ursprüngliches Element an dem das bewegliche Element hängt. 47 this.UrNextSibling = null; // Ursprüngliches Nachbarelement 48 this.UrZIndex = null; // Ursprünglicher z-Index 49 this.UrBreite = null; // Breite des zum Bewegeneden Elements 50 this.UrLeft = null; // Ursprünglicher linker Abstand 51 this.UrTop = null; // Ursprünglicher oberer Abstand 52 this.OriginalWidth = null; // Ursprüngliche Breite 53 this.OriginalHeight = null; // Ursprüngliche Höhe 54}; 55 56 57 58// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 59// Event-Methoden 60// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 61 62/** 63 * Wird nicht direkt vom Event ausgelöst aber deligiert 64 * 65 * @param {Object} event 66 */ 67Draggable.prototype.mouseDown = function(event) 68{ 69 var elementToMove = this.rootElement; 70 71// // definiert man den Move-Event auf der areaToDragOn, kann es passieren, dass der Mauszeiger 72// // den Bereich verlässt und das Objekt sich nicht mehr bewegt 73// this.onmousemove = function(event) 74// { 75// event = event || window.event; // event überprüfen und IE-kompatibel machen 76// this.parentObject.onMouseMove(event); 77// }; 78 79 var mousePosition = getMouseCoords(event); 80 81 // alte Erscheinung speichern 82 this.UrPos = getPosition(elementToMove); // ursprüngliche Koordinaten 83 this.UrStylePosition = elementToMove.style.position; 84 this.UrParent = elementToMove.parentNode; // ursprünglicher parent vom übergebenen DragObjekt 85 this.UrNextSibling = elementToMove.nextSibling; // ursprünglicher nächster Nachbar vom übergebenen DragObjekt 86 this.UrZIndex = elementToMove.style.zIndex; 87 this.UrBreite = elementToMove.style.width; 88 this.UrTop = elementToMove.style.top; 89 this.UrLeft = elementToMove.style.left; 90 this.OriginalWidth = elementToMove.style.width; // ursprüngliche Breite merken 91 this.OriginalHeight = elementToMove.style.height; // ursprüngliche Höhe merken 92 93 // Bewegung initialisieren 94 95 this.offsetLeft = 0; 96 this.offsetTop = 0; 97 98 var left = getPosition(elementToMove).x; 99 var top = getPosition(elementToMove).y; 100 101 this.offsetLeft = mousePosition.x - left; 102 this.offsetTop = mousePosition.y - top; 103 104 // 105 // Höhe und Breite fixieren 106 // 107 elementToMove.style.width = getStyleValue (elementToMove, "width"); 108 elementToMove.style.height = getStyleValue (elementToMove, "height"); 109 elementToMove.style.height = this.rootElement.offsetHeight; // IE 110 elementToMove.style.width = this.rootElement.offsetWidth; // IE 111 112 // Positionierung wird jetzt absolut 113 elementToMove.style.position = 'absolute'; // die Positionierung vom DragObjekt auf absolut stellen 114 115 // 116 elementToMove.style.left = (mousePosition.x - this.offsetLeft) + "px"; // DragObjekt in x-Richtung verschieben? 117 elementToMove.style.top = (mousePosition.y - this.offsetTop) + "px"; // DragObjekt in y-Richtung verschieben? 118 119 elementToMove.style.zIndex = "11000"; 120 document.getElementsByTagName("BODY")[0].appendChild(elementToMove); 121}; 122 123 124/** 125 * Funktionalität zum Bewegen des Draggables 126 * Wird nicht direkt vom Event ausgelöst aber deligiert 127 * 128 * @param {Object} event 129 */ 130Draggable.prototype.mouseMove = function(event) 131{ 132 var mousePosition = getMouseCoords(event); 133 134 this.rootElement.style.left = (mousePosition.x - this.offsetLeft) + "px"; // DragObjekt in x-Richtung verschieben 135 this.rootElement.style.top = (mousePosition.y - this.offsetTop) + "px"; // DragObjekt in y-Richtung verschieben 136 137 // Wenn kein Container zugeordnet ist
138 //Draggable.actualDragObject.platzhalterAnzeigenUndPlatzSchaffen(event); 139 //this.platzhalterAnzeigenUndPlatzSchaffen(event); 140 141 return; 142}; 143 144 145/** 146 * Wird nicht direkt vom Event ausgelöst aber deligiert 147 * 148 * @param {Object} event 149 */ 150Draggable.prototype.mouseUp = function(event) 151{ 152// console.log("Draggable.prototype.mouseUp"); 153/* 154 //writeToDocumentBody("onMouseUp - Eventhandler werden wieder auf null gesetzt"); 155 if(Draggable.actualDragObject == null) 156 return; 157 158 // Werte des HTML-Elements zurücksetzen 159 Draggable.actualDragObject.bringZurueckZurUrspruenglichenPosition(); 160 161 Draggable.actualDragObject = null; // kein DragObjekt reagiert jetzt mehr 162*/ 163 // 164 // Orginalgröße merken und Größe auf die aktuelle festsetzen. 165 // 166 this.rootElement.style.width = this.OriginalWidth; 167 this.rootElement.style.height = this.OriginalHeight; 168 169}; 170 171 172 173 174 175 176// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 177// Commands 178// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 179 180/** 181 * Platzhalter mit den gleichen Maßen erstellen und zurück geben 182 */ 183Draggable.prototype.getPlatzhalter = function() 184{ 185 // 186 // Platzhalter anzeigen 187 // 188 if(this.platzhalter && this.platzhalter.parentNode) 189 this.platzhalter.parentNode.removeChild(this.platzhalter); 190 191 this.platzhalter = document.createElement(this.rootElement.tagName); // Platzhalter erstellen 192 193 //this.platzhalter.style.borderColor = "#BBBBBB"; 194 this.platzhalter.className = "DraggablePlatzhalter"; 195 this.platzhalter.style.borderColor = "orange"; 196 this.platzhalter.style.borderWidth = "2px"; 197 this.platzhalter.style.borderStyle = "dashed"; 198 199 // Platzhalter in die Form des dragObjekts bringen 200 this.platzhalter.style.height = getStyleValue (this.rootElement, "height"); 201 this.platzhalter.style.height = this.rootElement.offsetHeight; // IE 202 this.platzhalter.style.width = getStyleValue (this.rootElement, "width"); 203 204 //this.platzhalter.style.cssFloat = getStyleValue (this.rootElement, "cssFloat"); 205 //this.platzhalter.style.styleFloat = getStyleValue (this.rootElement, "styleFloat"); 206 this.platzhalter.style.cssFloat = this.rootElement.style.cssFloat; 207 this.platzhalter.style.styleFloat = this.rootElement.style.styleFloat; 208 209 return this.platzhalter; 210} 211 212/** 213 * Entfernt den Platzhalter dieses Draggables 214 */ 215Draggable.prototype.destroyPlatzhalter = function() 216{ 217 if(this.platzhalter) 218 { 219 this.platzhalter = null; 220 this.platzhalter.parentNode.remove(this.platzhalter); 221 } 222} 223 224/** 225 * Versteckt das Draggable 226 */ 227Draggable.prototype.hide = function() 228{ 229 this.rootElement.style.display = "none"; 230} 231 232/** 233 * Zeigt das Draggable 234 */ 235Draggable.prototype.makeVisibile = function() 236{ 237 this.rootElement.style.display = ""; 238} 239 240 241/** 242 * TODO: Kommt das besser ins DropTarget???? 243 * Das aktuell bewegte Objekt springt wieder zurück. 244 */ 245Draggable.prototype.bringZurueckZurUrspruenglichenPosition = function() 246{ 247 var elementToMove = this.rootElement; 248 249 // Das umschließende Element des Draggables verstecken 250 elementToMove.style.visibility="hidden"; 251 252 // war der Parent ein zugeordneter und zulässiger ZielContainer und hatte das dragObjekt ein ihm folgendes GeschwisterElement? 253 // wird mit insertBefore das dragObjekt wieder zurück gebracht 254 255 //if (this.UrNextSibling && this.UrNextSibling.id) 256 257 if (this.UrNextSibling) // TODO So ists eigentlich korrekter (vor allem für die Vorgangsliste) 258 { 259 this.UrParent.insertBefore(elementToMove, this.UrNextSibling); 260 } 261 // war der Parent ein zugeordneter und zulässiger ZielContainer und hatte das dragObjekt kein folgendes GeschwisterElement? 262 // wird mit einfachen appendChild das dragObjekt wieder zurück gebracht 263 else 264 { 265 this.UrParent.appendChild(elementToMove); 266 } 267 268 // alte Werte wieder herstellen 269 this.recallOldStyleValues();
270 271 // Das umschließende Element des Draggables anzeigen 272 elementToMove.style.visibility = "visible"; 273} 274 275/** 276 * Stellt die CSS-Werte wieder her, die beim MouseDown gespeichert wurden 277 */ 278Draggable.prototype.recallOldStyleValues = function() 279{ 280 var elementToMove = this.rootElement; 281 elementToMove.style.position = this.UrStylePosition; 282 elementToMove.style.left = this.UrLeft; 283 elementToMove.style.top = this.UrTop; 284// elementToMove.style.zIndex = this.UrZIndex; 285 elementToMove.style.width = this.UrBreite; 286 elementToMove.style.top = this.UrTop; 287 elementToMove.style.left = this.UrLeft; 288} 289 290 291Draggable.prototype.addPostionOffset = function(x,y) 292{ 293 this.rootElement.style.left = parseInt(this.rootElement.style.left) + x + "px"; // DragObjekt in x-Richtung verschieben 294 this.rootElement.style.top = parseInt(this.rootElement.style.top) + y + "px"; // DragObjekt in y-Richtung verschieben 295} 296 297 298 299// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 300// Queries 301// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 302 303/** 304 * Gibt das HTML-Element zurück, was als RootElement für DragObjekt dient. 305 */ 306Draggable.prototype.getRootHtmlElement = function() 307{ 308 return this.rootElement; 309} 310 311/** 312 * Gibt true zurück, wenn sich der Mauspfeil auf der linken Seite des Draggables befindet. 313 * Ansonsten wird false zurück gegeben. 314 * @param {Object} event 315 */ 316Draggable.prototype.istMausLinks = function(event) 317{ 318 if(!isMouseOverElement(this.rootElement,event)) // befindet sich die Maus nicht über dem Draggable 319 return null; // wird null zurück gegeben 320 var mousePos = getMouseCoords(event); // wo befindet sich die Maus 321 var targPos = getPosition(this.rootElement); // wo befindet sich das draggable? 322 var targWidth = parseInt(this.rootElement.offsetWidth); // die breite des draggables 323 var mitte = targPos.x + (targWidth/2); // die Mitte des Draggables, aber als Abstand zum linken Rand 324 325 if(mousePos.x < mitte) 326 { 327 return true; 328 } 329 else 330 { 331 return false; 332 } 333} 334 335/** 336 * Gibt true zurück, wenn der Mauspfeil sich in der oberen Hälfte des Draggables befindet. 337 * Befindet sich die Maus in der unteren Hälfte, wird false zurück gegeben. 338 * @param {Object} event 339 */ 340Draggable.prototype.istMausOben = function(event) 341{ 342 if(!isMouseOverElement(this.rootElement,event)) // befindet sich die Maus nicht über dem Draggable 343 return null; // wird null zurück gegeben 344 var mousePos = getMouseCoords(event); // wo befindet sich die Maus 345 var targPos = getPosition(this.rootElement); // wo befindet sich das draggable? 346 347 var targHeight= parseInt(this.rootElement.offsetHeight); // die Höhe des draggables 348 var mitte = targPos.y + (targHeight/2); // die Mitte des Draggables, aber als Abstand zum oberen Rand 349 350 if(mousePos.y < mitte) 351 { 352 return true; 353 } 354 else 355 { 356 return false; 357 } 358} 359 360/** 361 * Löscht das Draggable 362 * @param {Object} event 363 */
364Draggable.prototype.removeHTML = function() 365{ 366 // Das HTML-Element aus dem DOM-Baum löschen 367 this.rootElement.parentNode.removeChild(this.rootElement); 368} 369 370 371 372 373/** 374 * 375 * @param {Object} event 376 */ 377Draggable.prototype.printKeyValueToDebuggingInfoDiv = function(key,value) 378{ 379 var ausgabeDiv = document.getElementById("idDivDebuggingInfosDraggable_" + this.rootElement.id); 380 if(!ausgabeDiv) 381 return; 382 var keyValueDiv = document.getElementById("IdKeyValueDraggableDebuggingInfoDiv_" + this.rootElement.id + "_" + key); 383 if (keyValueDiv == null ) 384 { 385 keyValueDiv = document.createElement( "DIV" ); 386 keyValueDiv.id = "IdKeyValueDraggableDebuggingInfoDiv_" + this.rootElement.id + "_" + key; 387 ausgabeDiv.appendChild(keyValueDiv); 388 } 389 keyValueDiv.innerHTML = "<p>" + key + ": " + value + "</p>"; 390 return ausgabeDiv; 391} 392 393
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.