html5指南（3）-实现拖拽功能

　　本文的内容是关于在html5中如何实现html元素拖拽功能。在html5之前要实现拖拽，需要借助js，现在html5内部就支持了拖拽的功能，但是要实现稍微复杂的功能还是少不了js的帮忙。下面我们看几个例子。

　　1.创建拖拽对象

　　我们可以通过draggable属性告诉浏览器，哪些元素需要实现拖拽功能。draggable有三个值：true：元素可以被拖拽；false：元素不能被拖拽；auto：浏览器自己判断元素是否能被拖拽。

　　系统默认值是auto，但auto情况下浏览器对不同元素拖拽功能的支持是不一样，如：支持img对象，不支持p对象。所以，如果需要拖拽一个元素，最好还是把draggale设置为true。下面我们看一个例子：

    
    
    

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

            

                drop here
        

    

    
        
        

运行效果：

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

WOMBO

使用AI创作美丽的艺术品

下载

　　2.处理拖拽事件

　　现在我们来了解拖拽相关的事件，有两种类型的事件，一种是拖拽对象的事件，一种是投放区的事件。拖拽事件包括：dragstart：当元素拖拽开始触发；drag：在元素拖拽过程中触发；dragend：元素拖拽结束时触发。下面我们就看一个例子：

    
    
    

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

            

                drop here
        

    

    

运行效果：

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

 　　3.创建投放区

　　我们来看投放区相关的事件：dragenter：当拖拽对象进入投放区时触发；dragover：拖拽对象在投放区内移动时触发；dragleave：拖拽对象没有投放到投放区，离开投放区的时候触发；drop：拖拽对象投放在投放区时触发。

　　我们来看一个例子：

    
    
    

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

            

                drop here
        

    

    

运行结果：

 　　4.使用DataTransfer

　　我们使用DataTransfer从拖拽对象向投放区传递数据。DataTransfer有下面的属性和方法：types：返回数据的格式；getData()：返回指定格式数据；setData(, )：设置指定格式数据；clearData()：移除指定格式数据；files：返回已经投放的文件数组。

 　 我们来看下面的例子，他实现的效果和例3一样：

    
    
    

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

            

                drop here
        

    

    

　　5.拖拽文件

　　html5支持file api，可以让我们操作本地文件。一般我们不直接使用file api，我们可以结合其他特性一起使用，比如结合拖拽特效，如下例：

    
    
    

        

            Drop Files Here
    

    
    

　　DataTransfer返回FileList对象，我们可以把他当做file数组对象，file包含下面属性：name：文件名字；type：文件类型（MIME类型）；size：文件大小。

 运行效果：

　　6.上传文件

　　下面介绍一个通过拖拽ajax上传文件的实例。

    
    
    

    

        

            

                Bananas:
            

                
        

        

            

                Apples:
            

                
        

        

            

                Cherries:
            

                
        

        

            

                File:
            

                
        

        

            

                Total:
            

                0 items
        

    

    

        

            Drop Files Here
    

    
        Submit Form
    
    
        
        

效果：

　　上面的一些例子不同浏览器运行效果可能不同，我用的是chrome浏览器，除了例5和6不支持多文件外，其他例子运行正常。大家可以下载demo。