html5之拖放的学习和完整实例代码

本文学习html5的拖放并完整实例代码，希望对H5初学者有帮助！

1)创建来源项目

  1.1)draggable属性的值：

      true——此元素能被拖动；

      false——此元素不能被拖动；

      auto——浏览器能够自主决定某个元素能否被拖动；

立即学习“前端免费学习笔记（深入）”；

  1.2）被拖动元素的事件：

      dragstart——在元素開始被拖动时触发；

      drag——在元素被拖动时重复触发。

      dragend——在拖动操作完毕时触发；

2）创建释放区

   2.1）释放区事件：

        dragenter——当被拖动元素进入释放区所占领的屏幕空间时触发；

        dragover——当被拖动元素在释放区内触发时移动触发；

        dragleave——当被拖动元素没有放入就离开释放区时触发；

        drop——当被拖动元素在释放区放下时触发。

    
        
        
    
    
        

            @@##@@
            @@##@@
            @@##@@
            

                
Drop Here
            
            
        
            
    
        
    

3)使用DataTransfer对象

  3.1)与拖放操作所触发的事件同一时候派发的对象是DragEvent，它派生于MouseEvent。

Akkio

Akkio 是一个无代码 AI 的全包平台，任何人都可以在几分钟内构建和部署AI

下载

  DragEvent对象定义的额外属性：

  dataTransfer——返回用于数据传输到释放区的对象（DataTransfer）；

  3.2)DataTransfer对象定义的属性：

  types——返回数据的格式。

  getData()——返回指定格式的数据；

  setData(,)——设置指定格式的数据。

  clearData()——移除指定格式的数据。

  files——返回已被拖动文件的列表。  

    
        
        
    
    
        

            @@##@@
            @@##@@
            @@##@@
            

                
Drop Here
            
            
        
            
    
        
    

    3.3）拖放文件：

    File对象定义的属性

    name——获取文件名称。

    type——获取文件类型。以MIME类型表示；

    size——获取文件大小（以字节计算）；

    
        
        
    
    
        

            

                

                    
Bananas:
                    

                

                

                    
Apples:
                    

                

                

                    
Cherries:
                    

                

                

                    
File:
                    

                

                

                    
Total:
                    
0 items
                
                
            

            

                
Drop Files Here
            
            
            Submit Form
        
        
    

相关html5课程推荐：php中文网html5视频在线教程