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

		<div id="Description">
			<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">s.o.</span> IE <span class="emphasis">5,5 (Win) </span>DOM <span class="emphasis">s.o.</span></td>
				</tr>
				<tr>
					<td valign="top" nowrap class="usage"><p class="literal"></p>
					</td><td valign="top" nowrap class="requirements">Remont&eacute;e: oui; Annulable: non</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="description"><p>En mode de modification, un &eacute;l&eacute;ment positionnable configur&eacute; pour le glissement re&ccedil;oit ces &eacute;v&eacute;nements dans l'ordre suivant: <span class="literal">onmovestart</span> (au d&eacute;but du glissement), <span class="literal">onmove</span> (&agrave;plusieurs reprises pendant le glissement) et <span class="literal">onmoveend</span> (au rel&acirc;chement du bouton de la souris). L'exemple suivant utilise plusieurs &eacute;v&eacute;nements pour illustrer les scripts du mode de modification de Microsoft Internet Explorer (notez que le m&eacute;canisme de glissement d'&eacute;l&eacute;ments d'origine ne fonctionne pas bien dans IE 6 si l'&eacute;l&eacute;ment <span class="literal">&lt;!DOCTYPE&gt;</span> pointe sur une DTD en mode de compatibilit&eacute; avec les normes):
</p>
<span class="PROGRAMLISTING"><pre>&lt;htm&gt; 
&lt;head&gt; 
&lt;title&gt;IE 5.5 (Windows) Edit Mode&lt;/title&gt; 
&lt;style type=&quot;text/css&quot;&gt;
   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}
&lt;/style&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
// built-in dragging support
document.execCommand(&quot;2D-position&quot;,false,true);
// preserve content between modes
var oldHTML = &quot;&quot;;

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

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

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

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

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

// 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;
}
&lt;/script&gt; 
&lt;/head&gt; 
&lt;body onload=&quot;init( );&quot;&gt;
&lt;div id=&quot;wrapper&quot; contenteditable=&quot;true&quot;&gt;
    &lt;div id=&quot;myDIV&quot; class=&quot;regular&quot;&gt;
        This is a positioned element with some text in it.
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt; 
&lt;/html&gt;l</pre></span>
							</td>
						</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&#160;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="typicaltargets"><span class="title">Cibles typiques</span></td>
				</tr>
				<tr>
					<td colspan="2"><p>Un objet <span class="literal">LayoutRect</span> XML.</p>
					</td>
				</tr>
			</table>
		</div>
</body>
</html>
