html5如何实现拖放功能

小编给大家分享一下html5如何实现拖放功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

为岱岳等地区用户提供了全套网页设计制作服务，及岱岳网站建设行业解决方案。主营业务为成都做网站、网站建设、岱岳网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

html5的拖放

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。

 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如何实现拖放功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！