HTML | ondrop 事件属性

ondrop 事件属性用于将元素或文本拖放到有效的可放置位置或目标中。拖放是 HTML 5 的共同特性。
注意：默认情况下，图像和链接是可拖动的。
使用了不同的事件，并在 ondrop 事件之前发生。

• 事件发生在可拖动目标上
• 事件发生在放置目标上：

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

事件发生在可拖动目标上：有三个事件用于从源位置拖动元素。

Event	Functionality
ondragstart	This event is used when the user starts to drag an element.
ondrag	The ondrag event is used to dragging an element.
ondragend	This event is used to finish the dragging of an element.

事件发生在目标的放置上：用于放置元素的事件列表如下：

Event	Functionality
ondragenter	This event is used to dragged an element and enter into the valid drop target.
ondragover	This event is used when the dragged element is over the drop location.
ondragleave	This event occurs when the dragged element leaves the drop target.
ondrop	This event occurs when the dragged element is dropped on the drop target.

例子：

html

    
        
            HTML ondrop Event Attribute
        
         
        
 
            /* CSS property to create box */
            #geeks {
                width: 220px;
                height: 120px;
                padding: 15px;
                border: 3px solid #4cb96b;
            }
        
         
        
         
            /* 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));
            }
        
    
     
    
         
Drop the image into the rectangle:
 
         
        
        
        
         
        
         
    

输出：
在拖动元素之前：

拖放元素后：

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

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