Javascript Reference
Javascript Reference
Subscribe RSS
Categories: onmove

javascript onmove Description

@March 15, 2008, 1:22 a.m.
onmove, onmoveend, onmovestartFirefox/Netscape/NN n/a IE 5.5(Win) Chrome/Safari/DOM n/a  

Bubbles: Yes; Cancelable: No  

When in edit mode, a positionable element set up for dragging receives these events in the following sequence: onmovestart (upon starting the drag), onmove (repeatedly during the drag), and onmoveend (upon release of the mouse button). The following example uses several events to demonstrate IE edit mode scripting (note that the native element dragging mechanism doesn't work well in IE 6 if the <!DOCTYPE> element points to a standards-compatible mode DTD): 

<htm> 
<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>l
 
Typical Targets

An XML LayoutRect object.
javascript onmousewheel Description
Permanent URL: http://javascript.gakaa.com/onmove-description.aspx
atorvastatin 40mg without prescription <a href="https://lipiws.top/">atorvastatin 40mg brand</a> lipitor 80mg us
Rvzidg - 10 months
atorvastatin 20mg over the counter <a href="https://lipiws.top/">buy cheap lipitor</a> atorvastatin canada
Wsdgua - 10 months
I use Firefox every day. Firebug is great for developers.
javascript manual - 2010-04-06
Add comment (5)
Powered by Linode.