目录

ondrop 事件

示例

当可拖动元素放入 <div> 元素中时调用函数:

<div ondrop="myFunction(event)"></div>
亲自试一试 »

下面有更多示例。


描述

这个ondrop事件发生时可拖动的选择被删除在一个目标上。

拖放是 HTML 中的一个常见功能。当您 "grab" 一个对象并将其拖动到其他位置时。

要使元素可拖动,请使用可拖动属性

欲了解更多信息,请参阅HTML 拖放教程

链接和图片默认是可拖动的,不需要draggable属性。

许多事件发生在拖放操作的不同阶段(见下文):

拖动事件

在可拖动元素上:

Event Occurs When
ondrag An element is being dragged
ondragstart The user starts to drag an element
ondragend The user has finished dragging an element

笔记:拖动元素时,翁德拉格事件每 350 毫秒触发一次。

关于放置目标:

事件 发生时间
翁德拉根特 拖动的元素进入放置目标
拖拽离开 拖动的元素离开放置目标
翁德拉戈弗 拖动的元素位于放置目标上方
上落 拖动的元素被放置在目标上

也可以看看:

拖动事件对象
可拖动属性

教程:

HTML 拖放


语法

在 HTML 中:

< element ondrop=" myScript">
亲自试一试 »

在 JavaScript 中:

object.ondrop = function(){ myScript};
亲自试一试 »

在 JavaScript 中,使用 addEventListener() 方法:

object.addEventListener("drop", myScript);
亲自试一试 »

技术细节

气泡: 是的
可取消: 是的
事件类型: 拖动事件
HTML 标签: 所有 HTML 元素
DOM 版本: 3 级活动


更多示例

示例

所有可能的拖放事件的演示:

<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>
亲自试一试 »

浏览器支持

ondrop是 DOM Level 3 (2004) 功能。

所有现代浏览器都完全支持它:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 11