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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。