<html>
<link rel="stylesheet" href="josh.css">
<body bgcolor="#FFFFFF">

		<div id="説明">
			<table cellpadding="0" cellspacing="0" border="0" width="100%" class="main">
				<tr><td valign="top" class="name">onmove、onmoveend、onmovestart</td><td valign="top" nowrap class="compatibility">NN <span class="emphasis">なし</span> IE <span class="emphasis">5.5(Win)</span> DOM <span class="emphasis">なし</span></td>
				</tr>
				<tr>
					<td valign="top" nowrap class="usage"><p class="literal"></p>
					</td><td valign="top" nowrap class="requirements">バブル : あり、キャンセル可能 : なし</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="description">
						<p>編集モードでは、ドラッグ可能に設定された配置可能な要素は、<span class="literal">onmovestart</span> (ドラッグ開始時に発生)、<span class="literal">onmove</span> (ドラッグ中に繰り返し発生)、<span class="literal">onmoveend</span> (マウスボタンを離したときに発生) の順でイベントを受け取ります。下に、複数のイベントを使用した IE の編集モードのスクリプトの例を示します。ネイティブな要素のドラッグメカニズムは、<span class="literal">&lt;!DOCTYPE&gt;</span> 要素が標準準拠モードの DTD を指している場合、IE 6 ではうまく動作しません。
</p>
							</td>
						</tr>
						<tr><td valign="top" colspan="2" class="clearseparation">&nbsp;</td>
						</tr>
						<tr>
							<td colspan="2"><span class="programlisting"><pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;IE 5.5 (Windows) Edit Mode&lt;/title&gt;
&lt;style type="text/css"&gt;
   body &#123;font-family:Arial, sans-serif}
   #myDIV  &#123;position:absolute; height:100px; width:300px;}
   .regular &#123;border:5px black solid; padding:5px; background-color:lightgreen}
   .moving &#123;border:5px maroon dashed; padding:5px; background-color:lightyellow}
   .chosen &#123;border:5px maroon solid; padding:5px; background-color:lightyellow}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
// built-in dragging support
document.execCommand("2D-position",false,true);
// preserve content between modes
var oldHTML = "";

// engage static edit environment
function editOn( ) &#123;
    var elem = event.srcElement;
    elem.className = "chosen";
}

// engage special edit-move environment
function moveOn( ) &#123;
    var elem = event.srcElement;
    oldHTML = elem.innerHTML;
    elem.className = "moving";
}

// display coordinates during drag
function trackMove( ) &#123;
    var elem = event.srcElement;
    elem.innerHTML = "Element is now at: " + elem.offsetLeft + ", " +
                      elem.offsetTop;
}

// turn off special edit-move environment
function moveOff( ) &#123;
    var elem = event.srcElement;
    elem.innerHTML = oldHTML;
    elem.className = "chosen";
}

// restore original environment (wrapper gets onfocusout)
function editOff( ) &#123;
    var elem = event.srcElement;
    if (elem.id == "wrapper") &#123;
        elem.firstChild.className = "regular";
    }
}

// initialize event handlers
function init( ) &#123;
    document.body.oncontrolselect = editOn;
    document.body.onmovestart = moveOn;
    document.body.onmove = trackMove;
    document.body.onmoveend = moveOff;
    document.body.onfocusout = editOff;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="init( );"&gt;
&lt;div id="wrapper" contenteditable="true"&gt;
    &lt;div id="myDIV" class="regular"&gt;
        This is a positioned element with some text in it.
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
								</span></td>
						</tr>
						<tr><td valign="top" colspan="2" class="clearseparation">&nbsp;</td>
						</tr>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2"><span class="title">代表的なターゲット</span></td>
				</tr>
				<tr>
					<td colspan="2"><p>XML <span class="literal">LayoutRect</span> オブジェクト。</p>
					</td>
				</tr>
				<tr><td valign="top" colspan="2" class="clearseparation">&nbsp;</td>
				</tr>
			</table>
		</div>
</body>
</html>