onmove、onmoveend、onmovestartNN なし 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 オブジェクト。