HTML | DOM 拖动事件

该DOM拖动事件是当一个元素或者文本的选择被拖动或下降时发生的事件。这是 HTML5 的一个非常常见的特性。

事件类型：

• ondrag：拖动元素时发生的事件。
• ondrop：当被拖动的元素被放置在指定的放置目标上时发生的事件。
• ondragenter：拖动元素进入放置目标时发生的事件。
• ondragleave：被拖动元素离开放置目标时发生的事件。
• ondragover：当被拖动的元素在放置目标上时发生事件。

句法：

1. 对于 ondragenter 属性：
   • HTML：

   • JavaScript：

     object.ondragenter = function(){script};

2. 对于 ondrag 属性：
   • HTML：

   • JavaScript：

     object.ondrag = function(){script};

3. 对于 ondrop 属性：
   • HTML：

   • JavaScript：

     object.ondrop = function(){script};

4. 对于 ondragend 属性：
   • HTML：

   • JavaScript：

     object.ondragend = function(){script};

5. 对于 ondragleave 属性：
   • HTML：

   • JavaScript：

     object.ondragleave = function(){script};

6. 对于 ondragover 属性：
   • HTML：

   • JavaScript：

     object.ondragover = function(){script};

7. 对于 ondragstart 属性：
   • HTML：

   • JavaScript：

     object.ondragstart = function(){script};

示例 1： ondrag 和 ondrop。

  

     
        .droptarget {
           /*defining the target with different 
          properties where the element has to
          be dropped*/
            float: left;
            width: 100px;
            height: 35px;
            margin: 15px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    

  

    
        
        
          Drag me!
      
    
  
    
  
  
    
  
        
  
  
        
            function dragStart(event) {
               // starting dragging
                event.dataTransfer.setData(
                  "Text", event.target.id);
            }
  
            function dragging(event) {
              // element being dragged
                document.getElementById(
                  "demo").innerHTML = 
                  "The p element is being dragged"; 
            }
            function allowDrop(event) {
                event.preventDefault();
            }
  
            function drop(event) {
                event.preventDefault();
                // returns the data that is dropped
                var data = event.dataTransfer.getData("Text"); 
                
                event.target.appendChild(
                  document.getElementById(data));
                
               //element is being dropped
                document.getElementById("demo").innerHTML =
                  "The p element was dropped";
            }
        
  

  

输出：

拖动前：

掉落后：

示例 2： ondragenter 和 ondragleave。

  

    
        .droptarget {
            float: left;
            width: 100px;
            height: 35px;
            margin: 15px;
            margin-right: 100px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    

  

  
    
        
        
          Drag me!
      
    
  
    
  
    
    
    
  
    
        function dragStart(event) { 
            //element being dragged
            event.dataTransfer.setData
            ("Text", event.target.id);
        }
  
        function dragEnter(event) {
            if (event.target.className == "droptarget") {
                //entering the dropzone
                document.getElementById("demo").innerHTML =
                  "Entered the dropzone"; 
                event.target.style.backgroundColor = 
                  "lightyellow";
            }
        }
  
        function dragLeave(event) {
            if (event.target.className == "droptarget") {
                //leaving the dropzone
                document.getElementById("demo").innerHTML = 
                  "Left the dropzone"; 
                event.target.style.backgroundColor = "";
            }
        }
  
        function allowDrop(event) {
            event.preventDefault();
        }
  
        function drop(event) { 
            // element being dropped
            event.preventDefault();
            event.target.style.backgroundColor = "";
            var data = event.dataTransfer.getData
            ("Text");
            
            event.target.appendChild(
              document.getElementById(data));
        }
    
  

  

输出：
拖动前：

掉落后：

支持的浏览器：

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