HTML ondragend用法及代码示例

当用户完成元素的拖动时，ondragend事件属性将起作用。拖放函数在HTML5中很常见。任何元素都可以使用HTML5 draggable属性使之可拖动。

用法:

<element ondragend = "script">

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

Note:图像和链接默认是可拖动的。

例：

HTML

<!-- HTML code to implement ondragend event using drag
and drop event attribute -->
<!DOCTYPE HTML>
<html>
    <head>
        <title>ondragend Event Attribute</title>
        <style>
            .box {
                width:30%; 
                height:50px;
                margin:20px;
                border:1px solid black;
                text-align:center;
            }
        </style>
         
        <script>
             
            /* 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));
            }
        </script>
    </head>
     
    <body>
         
        <!-- ondragend event starts from here -->
        <div class="box" ondrop="drop_event(event)"
        ondragover="drop_allow(event)">
            <p ondragstart="starts_drag(event)"
                ondragend="end_drag(event)"
            draggable="true" id="gfg">GeeksforGeeks
<p>
        </div>
         
        <div class="box" ondrop="drop_event(event)"
        ondragover="drop_allow(event)"></div>
        <!-- ondragend event complete here -->
         
        <p id="demo"></p>
 
        </center>
    </body>
</html>

输出：

支持的浏览器：下面列出了ondragend事件属性支持的浏览器：

谷歌浏览器4.0
Internet Explorer 9.0
Mozilla Firefox 3.5
Safari 6.0
Opera 12.0

相关用法

注：本文由纯净天空筛选整理自Sabya_Samadder大神的英文原创作品 HTML | ondragend Event Attribute。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。