HTML ondrop 事件

当在有效的放置目标上放置可拖动的元素或文本时，ondrop 事件触发。

实例

<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {
  float: left;
  width: 100px;
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<p>在两个矩形之间来回拖动p元素：</p>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
  <p ondragstart="dragStart(event)" draggable="true" id="dragtarget">拖动我!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p style="clear:both;" id="demo"></p>
<script>
function dragStart(event) {
  event.dataTransfer.setData("Text", event.target.id);
  document.getElementById("demo").innerHTML = "开始拖拽 p 元素";
}
function allowDrop(event) {
  event.preventDefault();
}
function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
  document.getElementById("demo").innerHTML = "The p element was dropped";
}
</script>
</body>
</html>

运行一下

浏览器支持

事件
ondrop	4	9	3.5	6	12

所有主流浏览器都支持 ondrop 事件。

定义和用法

当在有效的放置目标上放置可拖动的元素或文本时，ondrop 事件触发。

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

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

下面是一些在拖放操作的不同阶段可能发生的事件：

在可拖动目标（源元素）上触发的事件：

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

对投放目标触发的事件：

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

HTML 4.01 与 HTML5 之间的差异

无。

语法

<element ondrop="script">

属性值

值	描述
script	ondrop 发生时运行的脚本。

HTML ondrop 事件

实例

浏览器支持

定义和用法

HTML 4.01 与 HTML5 之间的差异

语法

属性值

分类导航