JavaScript HTML DOM ondrop 事件

ondrop 事件

当在可用的放置目标上放置可拖动的元素或文本选择时，会发生ondrop事件。当你“抓住”一个物体并将其拖到另一个位置时。有关更多信息，请参阅我们关于HTML5拖放教程。

注意：要使元素可拖动，请使用全局HTML5 draggable属性。

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

在拖放操作的不同阶段中，有许多事件被使用，并且可能会发生，在可拖动目标（源元素）上触发的事件：

onstart - 当用户开始拖动元素时发生
ondrag - 在拖动元素时发生
ondragend - 在用户完成拖动元素时发生

在放置目标上触发的事件：

ondragenter - 当拖动的元素进入放置目标时发生
ondragover - 当拖动的元素位于放置目标上时发生
ondragleave - 当拖动的元素离开放置目标时发生
ondrop - 在拖放目标上放置拖动的元素时发生

当用户开始拖动<p>元素时执行JavaScript：

<p draggable="true" ondrop="myFunction(event)">拖动我!</p>

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
事件
ondrop	9.0+	4.0+	3.5+	6.0+	12.0+

语法

在HTML中：

在JavaScript中：

object.ondrop = function(){myScript};

在JavaScript中，使用addEventListener()方法：

object.addEventListener("drop", myScript);

注意:在Internet Explorer 8和更早版本不支持使用addEventListener()方法。

技术细节

项目	描述
冒泡：	有
取消：	有
事件类型：	DragEvent
支持的HTML标记：	所有HTML标记

更多例子

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

<p draggable="true" id="dragtarget">拖动我!</p>

<div class="droptarget">放在这!</div>

<script>
/* ----------------- 在拖动目标上触发的事件 ----------------- */

document.addEventListener("dragstart", function(event) {
  //dataTransfer.setData（）方法设置数据类型和拖动数据的值
  event.dataTransfer.setData("Text", event.target.id);

  // 开始拖动p元素时输出一些文本
  document.getElementById("demo").innerHTML = "Started to drag the p element.";

  // Change the opacity of the draggable element
  event.target.style.opacity = "0.4";
});

// 拖动p元素时，更改输出文本的颜色
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});

// 完成拖动p元素后输出一些文本并重置不透明度
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Finished dragging the p element.";
  event.target.style.opacity = "1";
});


/* ----------------- 在放置目标上触发的事件 ----------------- */

//当可拖动的p元素进入droptarget时，更改DIVS的边框样式
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "3px dotted red";
  }
});

// 默认情况下，不能在其他元素中删除数据/元素。 要允许删除，我们必须阻止元素的默认处理
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});

// 当可拖动的p元素离开droptarget时，重置DIVS的边框样式
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
    event.target.style.border = "";
  }
});

/* 在drop  - 防止浏览器默认处理数据（默认为打开时链接打开）
重置输出文本的颜色和DIV的边框颜色
使用dataTransfer.getData（）方法获取拖动的数据
拖动的数据是拖动元素的id（“drag1”）
将拖动的元素追加到drop元素中
*/
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>