最新的Web开发教程
 

ondragend事件

<事件对象

执行一个JavaScript当用户已经完成拖动<p>元素:

<p draggable="true" ondragend="myFunction(event)">Drag me!</p>
试一试»

更多"Try it Yourself"下面的例子。


定义和用法

当用户已经完成拖动元件或文本选择发生ondragend事件。

拖放是HTML5中一个非常普遍的特征。 这是当你"grab"的对象,并将其拖动到不同的位置。 欲了解更多信息,请参阅我们的HTML教程HTML5拖放

注:为了使元素可拖动,使用全球HTML5 拖拽属性。

提示:链接和图像默认拖动,并且不需要draggable属性。

还有所使用的许多事件,并且可能发生,在拖放操作的不同阶段:

  • 事件的可拖动目标烧制 (the source element)
    • ondragstart -当用户开始拖动一个元件发生
    • ondrag当 -当被拖动的元素出现
    • ondragend - 当用户已经完成拖动元件发生

  • 活动上放置目标射击:
    • ondragenter -当拖动的元素进入放置目标发生
    • ondragover -发生在拖动的元素是在放置目标
    • ondragleave -当拖动的元素离开放置目标出现
    • ondrop -当拖动的元素上放置目标出现下降

浏览器支持

在表中的数字规定,完全支持该事件的第一个浏览器版本。

事件
ondragend 4 9 3.5 6 12.0

句法

在HTML:

在JavaScript:

object .ondragend=function(){ 试一试»

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

object .addEventListener("dragend", myScript );
试一试»

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


技术细节

泡沫:
取消: 没有
事件类型: 的dragEvent
支持的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>
试一试»

相关页面

HTML教程: HTML5拖放

HTML参考: HTML拖动属性


事件对象参考 事件对象