html5如何实现拖放功能-创新互联

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

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

html5的拖放

1)创建来源项目

1.1)draggable属性的值：

true——此元素能被拖动；

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

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

1.2）被拖动元素的事件：

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

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

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

2）创建释放区

2.1）释放区事件：

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

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

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

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

3)使用DataTransfer对象

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

DragEvent对象定义的额外属性：

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

3.2)DataTransfer对象定义的属性：

types——返回数据的格式。

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

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

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

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

3.3）拖放文件：

File对象定义的属性

name——获取文件名称。

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

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



    
        Example
        
    
    
        
            
                
                    Bananas:
                    
                
                
                    Apples:
                    
                
                
                    Cherries:
                    
                
                
                    File:
                    
                
                
                    Total:
                    0 items
                                
            
            
                Drop Files Here
                        
            Submit Form

以上是“html5如何实现拖放功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前文章：html5如何实现拖放功能-创新互联
文章转载：http://myzitong.com/article/pihhs.html

html5如何实现拖放功能-创新互联

其他资讯