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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。