HTML | ondragleave 事件属性

ondragleave 属性在可拖动元素或文本选择离开有效放置目标时起作用。它有助于拖动元素并进入或离开放置目标。拖放功能在 HTML 5 中非常流行。当元素可拖动并进入拖放目标时使用 CSS 属性。
支持的标签：它支持所有的 HTML 碎布。

句法：

属性值： ondragleave 事件属性包含在调用 ondragleave 事件时工作的单值脚本。
注意：默认情况下，图像和链接是可拖动的。
例子：

html

    
        ondragleave event attribute
        
            .droptarget {
                width: 250px;
                height: 100px;
                margin: 15px;
                padding: 5px;
                border: 2px solid black;
                color:Green;
            }
        
        
         
            /* 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));
            }
        
    
     
    
        
        
            Drag the element between the boxes
        
         
        
        
         
            
                GeeksforGeeks
            
             
        
         
        
        
        
         
        
 
        
 
        
    

输出：

支持的浏览器： ondragleave 事件属性支持的浏览器如下：

• 谷歌浏览器 4.0
• 浏览器 9.0
• 火狐浏览器 3.5
• Safari 6.0
• 歌剧 12.0