onmove、onmoveend、onmovestart | NN なし IE 5.5(Win) DOM なし |
バブル : あり、キャンセル可能 : なし | |
編集モードでは、ドラッグ可能に設定された配置可能な要素は、onmovestart (ドラッグ開始時に発生)、onmove (ドラッグ中に繰り返し発生)、onmoveend (マウスボタンを離したときに発生) の順でイベントを受け取ります。下に、複数のイベントを使用した IE の編集モードのスクリプトの例を示します。ネイティブな要素のドラッグメカニズムは、<!DOCTYPE> 要素が標準準拠モードの DTD を指している場合、IE 6 ではうまく動作しません。 |
|
<html> <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> |
|
代表的なターゲット | |
XML LayoutRect オブジェクト。 |
|