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

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

onmovestart event | movestart event

Browser support:

Occurs when the user starts dragging an absolute or relative positioned element in an editable region.

An editable region can be specified with the contentEditable and designMode properties.

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

The onmovestart event is cancelable, if it is canceled, the drag operation does not start. Example 1 demonstrates it.

If you would like to receive a notification when the user starts to resize an element, use the onresizestart event.

How to register:

In HTML:

In JavaScript:

object.onmovestart = handler;

object.attachEvent ("onmovestart", 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	Yes
Event object	-

Actions that invoke the onmovestart event:

Starting dragging a relative or absolute positioned element in an editable region.

The order of events related to the onmovestart event:

onmovestart
onmove
onmoveend

Example HTML code 1:

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

<head>
    <style>
        .blue {
            position: relative;
            left: 0px;
            top: 0px;
            width: 200px;
            height: 80px;
            background-color: blue;
        }

        .red {
            position: relative;
            left: 100px;
            top: 0px;
            width: 200px;
            height: 80px;
            background-color: red;
        }
    </style>
    <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>
    Try to drag the blue and red elements with your mouse!
    <div contenteditable="true" style="border:1px solid #000000; height:200px;">
        <div class="blue">
        </div>
        <div class="red" onmovestart="return false">
        </div>
    </div>
    <br /><br />
    <div id="info" style="background-color:#f0f0ff; font-weight:bold;"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

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>