onmove event | move event
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 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:
|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.
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:
|Changing the position by script.||
|Resizing the browser window if it causes the position of a positioned element to change.||
|Dragging a control element.||
|Dragging a positioned element.|
Example HTML code 1:
This example illustrates the use of the onmove event for an absolute positioned element:
Example HTML code 2:
This example shows a case when resizing the browser window causes firing an onmove event:
Example HTML code 3:
This example illustrates the use of the onmove event for an absolute positioned element in an editable region:
Example HTML code 4:
This example dumps the order of events while the user is dragging an absolute positioned element:
User Contributed Comments