11.36. HTML5 drag and drop

发布时间 ： 2025-10-25 13:33:14 UTC      

Page Views: 26 views

Drag and drop is part of the HTML5 standard.

Image0

Drag the RUNOOB.COM icon into the rectangle.

11.36.1. Drag and drop

Drag and drop is a common feature that grabs an object and then drags it to another location.

In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped.

11.36.2. Browser support

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support dragging.

Note: Safari 5.1.2 does not support dragging.

11.36.3. HTML5 drag and drop instance

The following example is a simple drag and drop example:

Example 

菜鸟教程(runoob.com)#div1
{width:350px;height:70px;padding:10px;border:1px solid
#aaaaaa;}
drag RUNOOB.COM
Picture to rectangular box:



   
<p>
 It may seem a little complicated, but we can look at different parts of the drag-and-drop event separately.
</p>

 

 
 
 
 
  11.36.4.  Set the element to be draggable  
 
 First, to make the element draggable, set the   draggable   property is set to   true   : 
 
 
 
<img draggable="true">

 
 
 
 
 
  11.36.5.  Drag what-   ondragstart   and   setData()    
 
 Then, specify what happens when the element is dragged. 
 
 In the above example, the ondragstart property calls a function, drag (event), which specifies the data being dragged. 
 
   dataTransfer.setData()   method to set the data type and value of the data being dragged 
 
 
 
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

 
 
 
   Text   It’s a   DOMString   represents the type of drag data to add to the drag object. The value is the id (“drag1”) of the draggable element. 
 
 
 
  11.36.6.  Where to put it-   ondragover    
 
   ondragover   event specifies where to place the dragged data. 
 
 By default, data / elements cannot be placed in other elements. If we need to set allow placement, we must block the default handling of the element. 
 
 This is done by calling the ondragover event’s   event.preventDefault()   methods: 
 
 
 
*event*.preventDefault()

 
 
 
 
 
  11.36.7.  Make placement-ondrop  
 
 Occurs when the dragged data is placed   drop   Events. 
 
 In the above example   ondrop   property calls a function   drop(event)   : 
 
 
 
function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

 
 
 
 Code interpretation: 
 
     
  •  
     Call   preventDefault()   to avoid the browser’s default handling of data (the default behavior of the drop event is to open as a link) 
     
    •  
  •  
     Pass through   dataTransfer.getData("Text")   method to get the data being dragged. The method will return in the   setData()   any data set to the same type in the. 
     
    •  
  •  
     The data being dragged is the id (“drag1”) of the dragged element. 
     
    •  
  •  
     Append the dragged element to the placement element 
     
    •  
 
 

 

                    
                
                

                    

                        

                            
                                文章链接
                            
                            ：
                            11.36. HTML5 drag and drop 
                        

                    

                

            
        
        

            

    
        

            

                

                    
                        
                        
                            
Principles and Applications of WebGIS 

                        
                        
                             37
                        
                    
                    
                        

                            
 
 
 

                        

                    
                

                
            

        

    

    
        

            

                

                    
                        
                        
                            
Web框架 

                        
                        
                             942
                        
                    
                    
                        

                            
 
 
 

                        

                    
                

                
            

        

    

    
        

            

                

                    
                        
                        
                            
WEB基础 

                        
                        
                             287
                        
                    
                    
                        

                            
 
 
 

                        

                    
                

                
            

        

    

    
        

            

                

                    
                        
                        
                            
Principles, Technologies, and Methods of Geographic Information Systems 

                        
                        
                             102
                        
                    
                    
                        

                            
 
 
 In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress.