onmove, onmoveend, onmovestart | NN nicht zutreffend IE 5.5(Win) DOM nicht zutreffend |
Aufwärtsverbreitung: Ja; Abbruch möglich: Nein | |
Im Bearbeitungsmodus empfängt ein für Drag&Drop-Aktionen eingerichtetes positionierbares Element die folgenden Ereignisse in der angegebenen Reihenfolge: onmovestart (zu Beginn der Drag&Drop-Aktion), onmove (wiederholt während des Ziehens) und onmoveend (beim Loslassen der Maustaste). Im folgenden Beispiel wird anhand verschiedener Ereignisse die Skripterstellung im IE-Bearbeitungsmodus demonstriert (beachten Sie, dass der native Drag&Drop-Mechanismus für Elemente in IE 6 nicht besonders gut funktioniert, wenn das <!DOCTYPE>-Element auf ein DTD im standardkompatiblen Modus weist): <htm> <head> <title>IE 5.5 (Windows) Edit Mode</title> <style type="text/css"> body {font-family:Arial, sans-serif} #myDIV {position:absolute; height:100px; width:300px;} .regular {border:5px black solid; padding:5px; background-color:lightgreen} .moving {border:5px maroon dashed; padding:5px; background-color:lightyellow} .chosen {border:5px maroon solid; padding:5px; background-color:lightyellow} </style> <script type="text/javascript"> // built-in dragging support document.execCommand("2D-position",false,true); // preserve content between modes var oldHTML = ""; // engage static edit environment function editOn( ) { var elem = event.srcElement; elem.className = "chosen"; } // engage special edit-move environment function moveOn( ) { var elem = event.srcElement; oldHTML = elem.innerHTML; elem.className = "moving"; } // display coordinates during drag function trackMove( ) { var elem = event.srcElement; elem.innerHTML = "Element is now at: " + elem.offsetLeft + ", " + elem.offsetTop; } // turn off special edit-move environment function moveOff( ) { var elem = event.srcElement; elem.innerHTML = oldHTML; elem.className = "chosen"; } // restore original environment (wrapper gets onfocusout) function editOff( ) { var elem = event.srcElement; if (elem.id == "wrapper") { elem.firstChild.className = "regular"; } } // initialize event handlers function init( ) { document.body.oncontrolselect = editOn; document.body.onmovestart = moveOn; document.body.onmove = trackMove; document.body.onmoveend = moveOff; document.body.onfocusout = editOff; } </script> </head> <body onload="init( );"> <div id="wrapper" contenteditable="true"> <div id="myDIV" class="regular"> This is a positioned element with some text in it. </div> </div> </body> </html>l |
|
Typische Ziele | |
Ein LayoutRect-XML-Objekt. |