ondragstartEvent

事件对象参考手册 Event Object

Examples

Execute JavaScript when the user starts dragging the <p> element:

Try it Yourself »

More examples are included at the bottom of this article.

Definition and Usage

The ondragstart event fires when the user starts dragging an element or selected text.

Drag and drop is a very common feature in HTML5. For more information, see our HTML tutorial:HTML5 Drag and Drop。

Note:To make an element draggable, you need to use the HTML5draggableattribute.

Tip:Links and images are draggable by default, and do not need the draggable attribute.

The following events are fired during the drag and drop process:

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

Events fired on the drop target:
- ondragenter- This event fires when the dragged object enters its container.
- ondragover- This event fires when a dragged object is dragged within the container of another object.
- ondragleave- This event fires when the dragged object leaves its container.
- ondrop- This event fires when the mouse button is released during a drag process.

Browser Support

Note:While an element is being dragged, the ondragover event fires every 350 milliseconds.

Event
ondragstart	4.0	9.0	3.5	6.0	12.0

Syntax

In HTML:

<element ondragstart="myScript">Try it Yourself

In JavaScript:

object.ondragstart=function(){myScript};Try it Yourself

In JavaScript, using the addEventListener() method:

object.addEventListener("dragstart", myScript);Try it Yourself

Note:Internet Explorer 8 and earlier IE versions do not supportaddEventListener()the method.

Technical Details

Bubbles:	Yes
Cancelable:	Yes
Event type:	DragEvent
Supported HTML tags:	All HTML elements

More Examples

Example

The following example demonstrates all the drag and drop events:

/* Fired while dragging */
document.addEventListener("dragstart", function(event) {
// The dataTransfer.setData() method sets the data type and the dragged data
    event.dataTransfer.setData("Text", event.target.id);
// Output some text when dragging the p element
document.getElementById("demo").innerHTML = "Started dragging the p element.";
// Modify the opacity of the dragged element
    event.target.style.opacity = "0.4";
});
// While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
    document.getElementById("demo").style.color = "red";
});
// When finished dragging the p element, output some text and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element";
    event.target.style.opacity = "1";
});
/* Fired after dragging is completed */
// When the p element is dragged into the drop target, change the div's border style
document.addEventListener("dragenter", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "3px dotted red";
    }
});
// By default, data/elements cannot be dragged and dropped into other elements. For drop, we must prevent the element's default handling
document.addEventListener("dragover", function(event) {
    event.preventDefault();
});
// When the draggable p element leaves the drop target, reset the div's border style
document.addEventListener("dragleave", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
    }
});
/* For drop, prevent the browser's default handling of data (links are opened by default on drop)
Reset the color of the output text and the border color of the DIV
Use the dataTransfer.getData() method to get the dragged data
The dragged data element id ("drag1")
Append the dragged element to the drop element */
document.addEventListener("drop", function(event) {
    event.preventDefault();
    if ( event.target.className == "droptarget" ) {
        document.getElementById("demo").style.color = "";
        event.target.style.border = "";
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
});

Try it Yourself »

HTML Tutorial:HTML5 Drag and Drop

HTML Reference Manual:HTML draggable Attribute