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

		<div id="Beschreibung">
			<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">nicht zutreffend</span> IE <span class="emphasis">5.5(Win)</span> DOM <span class="emphasis">nicht zutreffend</span></td>
				</tr>
				<tr>
					<td valign="top" nowrap class="usage"><p class="literal"></p>
					</td><td valign="top" nowrap class="requirements">Aufw&auml;rtsverbreitung: Ja; Abbruch m&ouml;glich: Nein</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="description"><p>Im Bearbeitungsmodus empf&auml;ngt ein f&uuml;r Drag&amp;Drop-Aktionen eingerichtetes positionierbares Element die folgenden Ereignisse in der angegebenen Reihenfolge: <span class="literal">onmovestart</span> (zu Beginn der Drag&amp;Drop-Aktion), <span class="literal">onmove</span> (wiederholt w&auml;hrend des Ziehens) und <span class="literal">onmoveend</span> (beim Loslassen der Maustaste). Im folgenden Beispiel wird anhand verschiedener Ereignisse die Skripterstellung im IE-Bearbeitungsmodus demonstriert (beachten Sie, dass der native Drag&amp;Drop-Mechanismus f&uuml;r Elemente in IE 6 nicht besonders gut funktioniert, wenn das <span class="literal">&lt;!DOCTYPE&gt;</span>-Element auf ein DTD im standardkompatiblen Modus weist):
</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 &#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=&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( ) &#123;
    var elem = event.srcElement;
    elem.className = &quot;chosen&quot;;
}

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

// display coordinates during drag
function trackMove( ) &#123;
    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( ) &#123;
    var elem = event.srcElement;
    elem.innerHTML = oldHTML;
    elem.className = &quot;chosen&quot;;
}

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

// 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=&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">Typische Ziele</span></td>
				</tr>
				<tr>
					<td colspan="2"><p>Ein <span class="literal">LayoutRect</span>-XML-Objekt.</p>
					</td>
				</tr>
			</table>
		</div>
</body>
</html>
