HTML ondrop用法及代碼示例

ondrop事件屬性用於拖動元素或文本並將其拖放到有效的可放置位置或目標中。拖放是HTML 5的常見函數。
注意：默認情況下，圖像和鏈接是可拖動的。

使用了不同的事件，這些事件發生在ondrop事件之前。

事件發生在可拖動目標上
事件發生在放置目標上：

事件發生在可拖動目標上：有三個事件用於從源位置拖動元素。

事件	函數性
ondragstart	當用戶開始拖動元素時，將使用此事件。
ondrag	ondrag事件用於拖動元素。
ondragend	此事件用於完成元素的拖動。

事件發生在目標放置時：用於放置元素的事件列表如下：

事件	函數性
ondragenter	此事件用於拖動元素並輸入有效的放置目標。
ondragover	當拖動的元素在放置位置上方時，將使用此事件。
ondragleave	當拖動的元素離開放置目標時，將發生此事件。
ondrop	當將拖動的元素放置在放置目標上時，將發生此事件。

例：

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title> 
            HTML ondrop Event Attribute 
        </title> 
          
        <style> 
  
            /* CSS property to create box */ 
            #geeks { 
                width:220px; 
                height:120px; 
                padding:15px; 
                border:3px solid #4cb96b; 
            } 
        </style> 
          
        <script> 
          
            /* script to allow drop of element */ 
            function allowDrop(gg) { 
                gg.preventDefault(); 
            } 
              
            /* script to drag an element */ 
            function drag(gg) { 
                gg.dataTransfer.setData("text", gg.target.id); 
            } 
              
            /* script to drop an element */ 
            function drop(gg) { 
                gg.preventDefault(); 
                var data = gg.dataTransfer.getData("text"); 
                gg.target.appendChild(document.getElementById(data)); 
            } 
        </script> 
    </head> 
      
    <body> 
        <p>Drop the image into the rectangle:</p> 
          
        <!-- ondrop event call here -->
        <div id = "geeks" ondrop = "drop(event)" 
            ondragover = "allowDrop(event)"> 
        </div><br> 
          
        <img id = "gfg" src =  
"https://media.geeksforgeeks.org/wp-content/uploads/gg-4.png"
        draggable = "true" ondragstart = "drag(event)" alt = "" /> 
          
    </body> 
</html>

輸出：
拖動元素之前：

拖放元素後：

支持的瀏覽器：下麵列出了HTML ondrop事件屬性支持的瀏覽器：

穀歌瀏覽器4.0
Internet Explorer 9.0
Firefox 3.5
Safari 6.0
Opera 12.0

相關用法

注：本文由純淨天空篩選整理自motamarriphani大神的英文原創作品 HTML | ondrop Event Attribute。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。