HTML ondragleave用法及代碼示例

當可拖動元素或文本選擇離開有效的放置目標時，ondragleave屬性將起作用。它有助於拖動元素，並且正在進入或離開放置目標。拖放函數在HTML 5中非常流行。在元素可拖動時使用CSS屬性，然後輸入到放置目標中。

用法:

<element ondragleave = "script">

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

Note:圖像和鏈接默認是可拖動的。

例：

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>ondragleave event attribute</title> 
        <style> 
            .droptarget {  
                width:250px;  
                height:100px; 
                margin:15px; 
                padding:5px; 
                border:2px solid black; 
                color:Green; 
            } 
        </style> 
        <script> 
          
            /* Function to start drag contenr */ 
            function dragStart(event) { 
                event.dataTransfer.setData("Text", event.target.id); 
            } 
              
            /* Function to dragenter event */ 
            function dragEnter(event) { 
                if ( event.target.className == "droptarget" ) { 
                    event.target.style.border = "2px solid green"; 
                    document.getElementById("demo").innerHTML =  
                                "Dropzone"; 
                } 
            } 
              
            /* Function to dragleave event */ 
            function dragLeave(event) { 
                if ( event.target.className == "droptarget" ) { 
                    event.target.style.border = ""; 
                    document.getElementById("demo").innerHTML =  
                            "Out of Dropzone"; 
                } 
            } 
              
            /* Function to allow drop content */ 
            function allowDrop(event) { 
                event.preventDefault(); 
            } 
              
            /* Function to drop content */ 
            function drop(event) { 
                event.preventDefault(); 
                var data = event.dataTransfer.getData("Text"); 
                event.target.appendChild( 
                    document.getElementById(data)); 
            } 
        </script> 
    </head> 
      
    <body> 
        <center> 
        <h1> 
            Drag the element between the boxes 
        </h1> 
          
        <!-- Drag and drop event starts with  
        ondragleave events -->
        <div class = "droptarget" ondrop = "drop(event)"
            ondragenter = "dragEnter(event)" 
            ondragleave = "dragLeave(event)" 
            ondragover = "allowDrop(event)"> 
          
            <h1 ondragstart = "dragStart(event)" 
            draggable = "true" id = "dragtarget"> 
                GeeksforGeeks 
            </h1> 
              
        </div> 
          
        <div class = "droptarget" 
            ondragenter = "dragEnter(event)" 
            ondragleave = "dragLeave(event)" 
            ondrop = "drop(event)" 
            ondragover = "allowDrop(event)"> 
        </div> 
        <!-- Drag and drop events ends -->
          
        <p style="clear:both;"></p> 
        <p id="demo"></p> 
        </center> 
    </body> 
</html>

輸出：

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

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

相關用法

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