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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。