HTML ondragend 事件

当用户完成拖动元素或文本选择时，ondragend 事件将触发。

拖放是 HTML5 中非常常见的功能。它是你点击一个目标并把它拖到一个不同的位置。

实例

<!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)" ondragend="dragEnd(event)" draggable="true" id="dragtarget">Drag me!</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 dragEnd(event) {
  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));
}
</script>
</body>
</html>

运行一下

浏览器支持

事件
ondragend	4	9	3.5	6	12

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

定义和用法

当用户完成拖动元素或文本选择时，ondragend 属性将触发。

拖放是 HTML5 中非常常见的功能。它是你点击一个目标并把它拖到一个不同的位置。

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

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

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

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

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

对投放目标触发的事件：

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

HTML 4.01 与 HTML5 之间的差异

无。

语法

<element ondragend="script">

属性值

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

HTML ondragend 事件

实例

浏览器支持

定义和用法

HTML 4.01 与 HTML5 之间的差异

语法

属性值

分类导航