更多"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拖動屬性
事件對象