HTML ondragenter用法及代碼示例

當內容可拖動時，HTML中的ondragenter事件屬性起作用。通過將可拖動屬性值設置為true來製作元素。 draggable屬性隻能采用true或false值。

用法:

<element ondragenter = "script">

屬性值：此屬性包含單值腳本，該腳本在調用ondragenter事件屬性時起作用。

範例1：

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            HTML ondragenter Event Attribute 
        </title> 
          
        <!-- script to add background color -->
        <script> 
            function MyFunction() { 
                document.getElementById("geeks").style.backgroundColor 
                            = "green"; 
            } 
        </script> 
    </head> 
      
    <body id = "geeks" style = "text-align:center"> 
          
        <!-- ondragenter event call here -->
        <h1 ondragenter = "MyFunction()" draggable = "true"> 
            GeeksforGeeks 
        </h1> 
          
        <p>Drag heading content to change background color</p> 
    </body> 
</html>

輸出：
拖動內容之前：

拖動內容後：

範例2：

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            HTML ondragenter Event Attribute 
        </title> 
          
        <script> 
            function dragenter_time() { 
                document.getElementById("geeks").innerHTML  
                    = "The date and time is:" + Date(); 
            } 
        </script> 
    </head> 
      
    <body> 
        <center> 
              
            <!-- ondragenter event call here -->
            <p id = "geeks" ondragenter="dragenter_time()"
                draggable = "true">Drag to know time 
            </p> 
        </center> 
    </body> 
</html>

輸出：
拖動內容之前：

拖動內容後：

支持的瀏覽器：下麵列出了ondragenter事件屬性支持的瀏覽器：

穀歌瀏覽器4.0
Internet Explorer 9.0
Firefox 3.5
Safari 6.0
Opera 12.0

相關用法

注：本文由純淨天空篩選整理自roshalmoraes大神的英文原創作品 HTML | ondragenter Event Attribute。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。