ondrop - JavaScript中文手册

实例

在可拖动元素放置在 <div> 元素中时执行 javascript:

<div ondrop="myFunction(event)"></div>

运行一下 »

本文底部包含了更多实例。

定义和用法

ondrop 事件在可拖动元素或选取的文本放置在目标区域时触发。

拖放是 HTML5 中非常常见的功能。更多信息可以查看我们 HTML 教程中的 html5 拖放。

注意： 为了让元素可拖动，需要使用 HTML5 draggable 属性。

提示： 链接和图片默认是可拖动的，不需要 draggable 属性。

在拖放的过程中会触发以下事件：

在拖动目标上触发事件 (源元素):
- ondragstart - 用户开始拖动元素时触发
- ondrag - 元素正在拖动时触发
- ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:
- ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
- ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
- ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
- ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

浏览器支持

注意： 在拖动元素时，每隔 350 毫秒会触发 ondragover 事件。

事件
ondrop	4.0	9.0	3.5	6.0	12.0

语法

HTML 中：

<element ondrop="myScript">

JavaScript 中：

object.ondrop=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("drop", myScript);

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

技术细节

是否支持冒泡:	Yes
是否可以取消:	Yes
事件类型:	DragEvent
支持的 HTML 标签:	All HTML elements

在线实例

实例

以下实例演示了所有的拖放事件：

<p draggable="true" id="dragtarget">Drag me!</p>

<div class="droptarget">Drop here!</div>

<script>
/* ----------------- Events fired on the drag target ----------------- */

 document.addEventListener("dragstart", function(event) {
    // The dataTransfer.setData() method sets the data type and the value of the dragged data
    event.dataTransfer.setData("Text", event.target.id);

    // Output some text when starting to drag the p element
     document.getElementById("demo").innerHTML = "Started to drag the p element.";

    // Change the opacity of the draggable 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";
});

// Output some text when finished dragging the p element and reset the opacity
 document.addEventListener("dragend", function(event) {
     document.getElementById("demo").innerHTML = "Finished dragging the p element.";
    event.target.style.opacity = "1";
});


/* ----------------- Events fired on the drop target ----------------- */

// When the draggable p element enters the droptarget, change the DIVS'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 dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
     event.preventDefault();
});

// When the draggable p element leaves the droptarget, reset the DIVS's border style
 document.addEventListener("dragleave", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
     }
});

/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
Reset the color of the output text and DIV's border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into 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));
    }
});
</script>

运行一下 »