最新的Web開發教程
 

ondragenter事件

<事件對象

執行一個JavaScript當一個可拖動的元件進入一個放置目標:

<div ondragenter="myFunction(event)"></div>
試一試»

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


定義和用法

當一個可拖動的元素或文本選擇進入一個有效的放置目標發生ondragenter事件。

該ondragenter和ondragleave事件可以幫助用戶明白,一個拖動元素即將進入或離開放置目標。 這可以這樣做,例如,當設置可拖動元件進入放置目標背景顏色,並且當元件被移出目標的去除顏色。

拖放是HTML5中一個非常普遍的特徵。 這是當你"grab"的對象,並將其拖動到不同的位置。 欲了解更多信息,請參閱我們的HTML教程HTML5拖放

注:為了使元素可拖動,使用全球HTML5 拖拽屬性。

提示:鏈接和圖像默認拖動,並且不需要draggable屬性。

還有所使用的許多事件,並且可能發生,在拖放操作的不同階段:

  • 事件的可拖動目標燒製 (the source element)

  • 活動上放置目標射擊:
    • ondragenter - 當拖動的元素進入放置目標發生
    • ondragover -發生在拖動的元素是在放置目標
    • ondragleave -當拖動的元素離開放置目標出現
    • ondrop -當拖動的元素上放置目標出現下降

瀏覽器支持

在表中的數字規定,完全支持該事件的第一個瀏覽器版本。

事件
ondragenter 4 9 3.5 6 12.0

句法

在HTML:

在JavaScript:

object .ondragenter=function(){ 試一試»

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

object .addEventListener("dragenter", 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拖動屬性


事件對象參考 事件對象