HTML ondragstart Event Attribute

HTML Event Attributes : Execute a JavaScript when the user starts to drag a <p> element

Definition and Usage

The ondragstart attribute fires when the user starts to drag an element or text selection.

Drag and drop is a very common feature in HTML5. It is when you "grab" an object and drag it to a different location. For more information, see our HTML Tutorial on HTML5 Drag and Drop.

Note: To make an element draggable, use the global HTML5 draggable attribute.
Tip: Links and images are draggable by default, and do not need the draggable attribute.

There are many event attributes that are used, and can occur, in the different stages of a drag and drop operation:

  • Events fired on the draggable target (the source element):
    • ondragstart - fires when the user starts to drag an element
    • ondrag - fires when an element is being dragged
    • ondragend - fires when the user has finished dragging the element

  • Events fired on the drop target:
    • ondragenter - fires when the dragged element enters the drop target
    • ondragover - fires when the dragged element is over the drop target
    • ondragleave - fires when the dragged element leaves the drop target
    • ondrop - fires when the dragged element is dropped on the drop target
  • Browser Support

    The numbers in the table specify the first browser version that fully supports the event attribute.

    Event Attribute
    ondragstart 4.0 9.0 3.5 6.0 12.0

    Syntax

    <element ondragstart="script">

    Attribute Values

    Value Description
    script The script to be run on ondragstart

    Technical Details

    Supported HTML tags: ALL HTML elements

    Related Pages

    HTML Tutorial: HTML5 Drag and Drop

    HTML Reference: HTML draggable Attribute

    HTML DOM Reference: ondragstart Event

    ❮ HTML Event Attributes