HTML | ondragend 事件属性

ondragend 事件属性在用户完成元素的拖动时起作用。拖放功能在 HTML5 中很常见。任何元素都可以通过使用 HTML5 的可拖动属性使可拖动。

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

句法：

属性值：此事件包含在调用 ondragend 事件时工作的单个属性脚本。

注意：默认情况下，图像和链接是可拖动的。

例子：

HTML

    
        ondragend Event Attribute
        
            .box {
                width: 30%;
                height: 50px;
                margin:20px;
                border: 1px solid black;
                text-align:center;
            }
        
         
        
             
            /* Function to start dragging */
            function starts_drag(event) {
                event.dataTransfer.setData("Text", event.target.id);
                document.getElementById("demo").innerHTML =
                                      "Dragging is in work";
            }
             
            /* Function to stop dragging */
            function end_drag(event) {
                document.getElementById("demo").innerHTML =
                                    "Dragging works properly";
            }
             
            /* Function to allow drop content */
            function drop_allow(event) {
                event.preventDefault();
            }
             
            /* Function to drop the content */
            function drop_event(event) {
                event.preventDefault();
                var data = event.dataTransfer.getData("Text");
                event.target.appendChild(document.getElementById(data));
            }
        
    
     
    
         
        
        
            GeeksforGeeks
 

        
         
        
        
         
        
 
 
        
    

输出：

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

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