In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > events > onmove

onmove event | move event

Browser support:

Occurs when the position of an element's top-left corner is changed.

To get the top-left corner of an element, use the clientTop, clientLeft, offsetTop and offsetLeft properties.

The placement of an element can be specified with the left, top, right, bottom, width and height style properties. The left, top, right and bottom properties only have effect on relative, absolute or fixed positioned elements. When the position of an absolute or fixed positioned element's top-left corner is changed, an onmove event is fired on the element. The onmove event is not fired on static and relative positioned elements.

The position of elements in an editable region (see the contentEditable and designMode properties) can be modified by the user through the user interface. When the user modifies the position of a control element (see form controls) or a relative or absolute positioned element in an editable region, an onmove event is fired on the element.

Note: positioned elements are not movable by default in editable regions; use the 2D-Position command to enable it.

If you would like to receive a notification when the size of an element changes, use the onresize event.

How to register:

In HTML:

In JavaScript:

object.onmove = handler;

object.attachEvent ("onmove", handler);

You can find the related objects in the Supported by objects section below.

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles	Yes
Cancelable	No
Event object	-

Actions that invoke the onmove event:

Changing the position of an absolute or fixed positioned element's top-left corner by script.
Resizing the browser window if it causes the position of an absolute or fixed positioned element's top-left corner to change.
Dragging a control element or a relative or absolute positioned element in an editable region.

Actions that do not invoke the onmove event:

Changing the position of a static or relative positioned element's top-left corner by script.

The order of events related to the onmove event:

Action	Event order
Changing the position by script.	onmove
Resizing the browser window if it causes the position of a positioned element to change.	onmove
Dragging a control element.	onmove
Dragging a positioned element.	onmovestart onmove onmoveend

Example HTML code 1:

This example illustrates the use of the onmove event for an absolute positioned element:

<head>
    <style>
        #blueDiv {
            position: absolute;
            left:100px;
            top:100px;
            width:200px;
            height:150px;
            background-color: blue;
        }
    </style>
    <script type="text/javascript">
        function ChangePos (){
            var blueDiv = document.getElementById ("blueDiv");
            blueDiv.style.left = "200px";;
            blueDiv.style.top = "200px";;
        }

        function OnMove (blueDiv) {
            var l = blueDiv.offsetLeft;
            var t = blueDiv.offsetTop;
            alert ("The position of the blue element's top-left corner will change to (" + l + ", " + t + ").");
        }
    </script>
</head>
<body>
    <div id="blueDiv" onmove="OnMove (this);"></div>
    <button onclick="ChangePos ();">Change the position of the blue element</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows a case when resizing the browser window causes firing an onmove event:

<head>
    <style>
        .blueDiv {
            position: absolute;
            right:100px;
            bottom:100px;
            width:200px;
            height:150px;
            background-color: blue;
        }
    </style>
    <script type="text/javascript">
        function OnMove (blueDiv) {
            var l = blueDiv.offsetLeft;
            var t = blueDiv.offsetTop;
            alert ("The position of the blue element's top-left corner will change to (" + l + ", " + t + ").");
        }
    </script>
</head>
<body>
    Start to resize the browser window!
    <div class="blueDiv" onmove="OnMove (this);"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the onmove event for an absolute positioned element in an editable region:

<head>
    <script type="text/javascript">
            // the '2D-position' command throws an exception in Firefox
        try {
                // enables moving absolute and relative positioned elements by dragging
            document.execCommand ("2D-position", false, true);
        }
        catch (e) {};
        
        function UpdateCoords (blueElem){
            var posX = document.getElementById ("posX");
            var posY = document.getElementById ("posY");
            posX.innerText = blueElem.offsetLeft;
            posY.innerText = blueElem.offsetTop;
        }
    </script>
</head>
<body>
    Move the blue element with your mouse!
    <div contenteditable="true" style="border:1px solid #000000; height:200px;">
        <div onmove="UpdateCoords (this)" style="width:200px;height:80px; background-color:blue; position:absolute;">
        </div>
    </div>
    <br /><br />
    The position of the blue element relative to the top-left corner of the document:<br />
    X pos: <span style="color:red" id="posX"></span><br/>
    Y pos: <span style="color:red" id="posY"></span>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This example dumps the order of events while the user is dragging an absolute positioned element:

<head>
    <script type="text/javascript">
            // the '2D-position' command throws an exception in Firefox
        try {
                // enables moving absolute and relative positioned elements by dragging
            document.execCommand ("2D-position", false, true);
        }
        catch (e) {};
        
        function DumpInfo () {
            var info = document.getElementById ("info");
            info.innerHTML += event.type + ", ";
        }
    </script>
</head>
<body>
    Drag the blue element with your mouse!
    <div contenteditable="true" style="border:1px solid #000000; height:200px;">
        <div style="width:200px;height:80px; background-color:blue; position:absolute;"
                onmovestart="DumpInfo ()" onmove="DumpInfo ()" onmoveend="DumpInfo ()">
        </div>
    </div>
    <br /><br />
    <div id="info" style="background-color:#f0f0ff; font-weight:bold;"></div>
</body>