更多"Try it Yourself"下面的例子。
定义和用法
当一个可拖动的元素或者文本的选择是在一个有效的放置目标下降时发生ondrop事件。
拖放是HTML5中一个非常普遍的特征。 这是当你"grab"的对象,并将其拖动到不同的位置。 欲了解更多信息,请参阅我们的HTML教程HTML5拖放 。
注:为了使元素可拖动,使用全球HTML5 拖拽属性。
提示:链接和图像默认拖动,并且不需要draggable属性。
还有所使用的许多事件,并且可能发生,在拖放操作的不同阶段:
- 事件的可拖动目标烧制 (the source element) :
- ondragstart -当用户开始拖动一个元件发生
- ondrag当 -当被拖动的元素出现
- ondragend -当用户已经完成拖动元件发生
- 活动上放置目标射击:
- ondragenter -当拖动的元素进入放置目标发生
- ondragover -发生在拖动的元素是在放置目标
- ondragleave -当拖动的元素离开放置目标出现
- ondrop - 当拖动的元素上放置目标出现下降
浏览器支持
在表中的数字规定,完全支持该事件的第一个浏览器版本。
事件 | |||||
---|---|---|---|---|---|
ondrop | 4 | 9 | 3.5 | 6 | 12.0 |
句法
在HTML:
< 试一试»
在JavaScript:
object .ondrop=function(){ 试一试»
注意: 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拖动属性
事件对象