HTML | DOM ondragend 事件

HTML DOM ondragend 事件在可拖动元素完成拖动时发生。
在拖放操作的不同阶段使用和发生了一些事件：

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

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

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

句法：
在 HTML 中：

在 JavaScript 中：

object.ondragend = function(){myScript};

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

object.addEventListener("dragend", myScript);

示例：使用 HTML

html

 

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

 

    
        
        GeeksforGeeks
    
        HTML DOM ondrop Event
 
        
           
            
              Draggable element
          
 
        
 
        
      
 
        
 
 
        
            function EledragStart(event) {
                event.dataTransfer.setData("Text", event.target.id);
                document.getElementById(
                  "demo").innerHTML = "Dragging Started";
            }
 
            function EledragEnd(event) {
                document.getElementById(
                  "demo").innerHTML = "Dragging Finished";
            }
 
            function EleallowDrop(event) {
                event.preventDefault();
            }
 
            function Eledrop(event) {
                event.preventDefault();
                var data = event.dataTransfer.getData("Text");
                event.target.appendChild(document.getElementById(data));
            }
        
  

 

输出

示例：使用 JavaScript

html

 

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

 

    
        
        GeeksforGeeks
    
        HTML DOM ondrop Event
 
        
            
              Draggable Element
          
 
        
 
        
 
        
 
 
        
            // Events fired on the drag target
            document.ondragstart = function(event) {
                event.dataTransfer.setData("Text", event.target.id);
                document.getElementById(
                  "demo").innerHTML = "Dragging Started";
            };
 
            document.ondragend = function(event) {
                document.getElementById(
                  "demo").innerHTML = "Dragging Finished";
            };
 
            // Events fired on the drop target
            document.ondragover = function(event) {
                event.preventDefault();
            };
 
            document.ondrop = function(event) {
                event.preventDefault();
                if (event.target.className == "droptarget") {
                    var data = event.dataTransfer.getData("Text");
                    event.target.appendChild(document.getElementById(data));
                }
            };
        
    

 

输出

例子：

html

 

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

 

    
        
        GeeksforGeeks
    
        HTML DOM ondrop Event
        
            
              Draggable element
          
 
        
 
        
 
        
 
 
        
            // Events fired on the drag target
            document.addEventListener("dragstart", function(event) {
                event.dataTransfer.setData("Text", event.target.id);
                document.getElementById(
                  "demo").innerHTML = "Dragging Started";
            });
 
            document.addEventListener("dragend", function(event) {
                document.getElementById(
                  "demo").innerHTML = "Dragging Finished";
            });
 
            // Events fired on the drop target
            document.addEventListener("dragover", function(event) {
                event.preventDefault();
            });
 
            document.addEventListener("drop", function(event) {
                event.preventDefault();
                if (event.target.className == "droptarget") {
                    var data = event.dataTransfer.getData("Text");
                    event.target.appendChild(document.getElementById(data));
                }
            });
        
    

 

输出

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

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