HTML | DOM ondragleave 事件

当可拖动元素或文本选择离开有效放置目标时，会发生 ondragleave 事件。
ondragenter 和 ondragleave 事件可以帮助用户理解 dropzone。
在拖放操作的不同阶段使用和发生了一些事件：

• ondragstart：开始拖动元素时发生。
• ondrag：在元素拖动时发生。
• ondragend：在元素拖动完成时发生。

• ondragenter：当被拖动的元素进入放置目标时发生。
• ondragover：当被拖动的元素在放置目标上时发生。
• ondragleave：当被拖动的元素离开放置目标时发生。
• ondrop：当被拖动的元素被放置在放置目标上时发生。

支持的标签：它支持所有 HTML 元素。

句法：
在 HTML 中：

在 JavaScript 中：

object.ondragleave = function(){myScript};

在 JavaScript 中，使用 addEventListener() 方法：

object.addEventListener("dragleave", myScript);

示例 1：使用 HTML

html

 

    
      HTML DOM ondragleave Event
  
    
        .droptarget {
            float: center;
            width: 300px;
            height: 50px;
            margin: 20px;
            padding: 5px;
            border: 6px solid green;
        }
    

 

    
        
        GeeksforGeeks
    
        HTML DOM ondragleave Event
 
        
 
            
                Dragable element
            
 
        
 
        
        
 
        
 
 
        
            function EledragStart(event) {
                event.dataTransfer.setData("Text", event.target.id);
            }
 
            function EledragEnter(event) {
                if (event.target.className == "droptarget") {
                    document.getElementById(
                      "demo").innerHTML = "Entered the dropzone";
                    event.target.style.border = "6px dotted red";
                }
            }
 
            function EledragLeave(event) {
                if (event.target.className == "droptarget") {
                    document.getElementById(
                      "demo").innerHTML = "Left the dropzone";
                    event.target.style.border = "";
                }
            }
 
            function EleallowDrop(event) {
                event.preventDefault();
            }
 
            function Eledrop(event) {
                event.preventDefault();
                var data = event.dataTransfer.getData("Text");
                event.target.appendChild(document.getElementById(data));
            }
        
  

 

输出：

示例 2：使用 JavaScript

html

 

    
        HTML DOM ondragleave Event
    
    
        .droptarget {
            float: center;
            width: 300px;
            height: 50px;
            margin: 20px;
            padding: 5px;
            border: 6px solid green;
        }
    

 

    
        
        GeeksforGeeks
    
        HTML DOM ondragleave Event
 
        
            
                Draggable Element
            
 
        
 
        
 
        
 
 
        
            // Event fired on the drag target
            document.ondragstart = function(event) {
                event.dataTransfer.setData("Text", event.target.id);
            };
 
            // Events fired on the drop target
            document.ondragenter = function(event) {
                if (event.target.className == "droptarget") {
                    document.getElementById(
                      "demo").innerHTML = "Entered the dropzone";
                    event.target.style.backgroundColor = "yellow";
                }
            };
 
            document.ondragover = function(event) {
                event.preventDefault();
            };
 
            document.ondragleave = function(event) {
                if (event.target.className == "droptarget") {
                    document.getElementById(
                      "demo").innerHTML = "Left the dropzone";
                    event.target.style.backgroundColor = "";
                }
            };
 
            document.ondrop = function(event) {
                event.preventDefault();
                if (event.target.className == "droptarget") {
                    event.target.style.backgroundColor = "";
                    var data = event.dataTransfer.getData("Text");
                    event.target.appendChild(document.getElementById(data));
                }
            };
        
    
 

 

输出：

示例 3：使用 addEventListener() 方法：

html

 

    HTML DOM ondragleave Event
    
        .droptarget {
            float: center;
            width: 300px;
            height: 50px;
            margin: 20px;
            padding: 5px;
            border: 6px solid green;
        }
    

 

    
        
        GeeksforGeeks
    
        HTML DOM ondragleave Event
 
        
            
                Draggable Element
            
 
        
 
        
 
        
 
 
        
            document.addEventListener("dragstart", function(event) {
                event.dataTransfer.setData("Text", event.target.id);
            });
 
            document.addEventListener("dragenter", function(event) {
                if (event.target.className == "droptarget") {
                    document.getElementById("demo").innerHTML =
                        "Entered the dropzone";
                    event.target.style.backgroundColor = "yellow";
                }
            });
 
            document.addEventListener("dragover", function(event) {
                event.preventDefault();
            });
 
            document.addEventListener("dragleave", function(event) {
                if (event.target.className == "droptarget") {
                    document.getElementById(
                      "demo").innerHTML = "Left the dropzone";
                    event.target.style.backgroundColor = "";
                }
            });
 
            document.addEventListener("drop", function(event) {
                event.preventDefault();
                if (event.target.className == "droptarget") {
                    event.target.style.backgroundColor = "";
                    var data = event.dataTransfer.getData("Text");
                    event.target.appendChild(document.getElementById(data));
                }
            });
        
    

 

输出：

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

• 谷歌浏览器
• IE浏览器
• 火狐
• 苹果Safari
• 歌剧