HTML | ondragstart 事件属性

HTML ondragstart 事件属性在用户想要拖动文本或元素时使用。它仅仅是在我们按下所需的文字将它们拖放到不同的位置的过程。

句法：

ondragstart="script" 

DRAG & DROP 过程包括许多操作：

1. 用于可拖动目标的操作：
   • ondrag-元素被拖动时使用
   • ondragstart –当用户开始拖动元素时使用
   • ondragend –当用户完成拖动元素时使用
2. 用于放置目标的操作：
   • ondrop：当被拖动的元素被放置在放置目标上时使用
   • ondragover：当被拖动的元素在放置目标上时使用
   • ondragleave：当被拖动元素离开放置目标时使用
   • ondragenter：当被拖动元素进入放置目标时使用

示例 1：在元素拖放时返回。

  

    
        .droptarget {
            float: CENTRE;
            width: 150px;
            height: 45px;
            margin: 25px;
            padding: 15px;
            border: 2px solid LIGHTGREEN;
        }
    

  

  
    Drag the text between the boxes.
  
    
        
        
        
          PRESS & DRAG
      
    
  
    
  
  
    
  
    
        function dragStart(event) {
            
            event.dataTransfer.setData(
              "Text", event.target.id);
        }
  
        function dragging(event) {
            
            document.getElementById(
              "demo").innerHTML = "Dragging";
        }
  
        function allowDrop(event) {
            event.preventDefault();
        }
  
        function drop(event) {
            event.preventDefault();
            var data = 
               event.dataTransfer.getData("Text");
            
            event.target.appendChild(
              document.getElementById(data));
            
            document.getElementById(
              "demo").innerHTML = 
              "Dropped";
        }
    
  

  

输出：

拖动前：

掉落后：

支持的浏览器：

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