Html5 拖拽api

拖拽要有两个元素，一个是要拖动的元素，一个是要放置到的元素。

　　1， 在默认情况下， 只有图片和文字是可以拖拽的，其它元素都不可以。因此要想使一个元素可拖动，必须设置它的draggable 属性为true, 在firefox浏览器中，还要在拖动元素的dragstart事件下，设置event.datatransfer.setData(),设置拖动的时候携带的数据 。这里要注意，draggable 是布尔值属性，一般布尔值属性，只要写上就表示它是true, 如checked 属性，但这里不是，一定要写全了 <div draggable="true"></div>

　　2， 在拖动的时候，我们可以看到，我们拖动的只是一个副本，元素在其原来位置上没有任何变化。

　　3， 在拖动的过程中，我们鼠标状态一直是一个圆圈，中间加一根横杆。表示禁止状态。这表明，在默认状态下，一个元素不允许放在另一个元素的上面。

　　4，  在拖动的元素上，会触发三个事件，dragstart, drag, dragend.

　　　　dragstart : 拖动开始的时候触发。在元素上面，按下鼠标左键，拖动的一瞬间触发。

　　　　　　dragend: 松开鼠标后触发。

　　　　　　drag: 拖动的过程中，持续触发。也就是 按下鼠标左键拖动到松开鼠标过程中，一直触发这个事件。

　　要放置到的元素：我们拖动一个元素放到另一个元素身上。上面已经说过：在默认情况下，一个元素是不能放到另一个元素上面，因此这要阻止事件的默认行为。怎样才能阻止事件的默认行为？ 这里要说到我们要放置到的元素，也就是目标元素，有四个事件。

　　　　　　dragenter:其他元素进入时触发，

　　　　　　dragover: 其他元素在其上面时触发，

　　　　　　dragleave, 其他元素离开时触发，

　　　　　　还有一个drop事件，拖动其他元素在其上面，然后释放鼠标时触发。

　　dragover ： 拖动元素在目标元素上触发，所以只要在dragover事件中阻止事件的默认行为，就可以把元素放到另一个元素身上。这时拖动元素到目标元素上时，鼠标状态变成了复制状态。

　　dragdrop: 拖动元素在目标元素上,并且释放鼠标。它主要用于获取拖动元素的信息。这里还有一个默认事件，如果从桌面拖动一张图片到目标元素上，然后，释放鼠标，它会在一个新的页面打开图片。释放一个文件在目标元素上，它会以链接的方式打开元素。阻止默认事件后，不会打开文件。

　　如果想读取或显示我们拖入的文件， 那就用到file API.  在dropover 事件中，我们拖入的文件信息保存在e.datatransfer.files 数组中。它是一个类数组，有一个length属性，显示我们一共放入了多少文件，通过提供索引可以访问任何一个文件, var filelist = e.datatransfer.files ； filelist[0] 就表示第一个文件。每一个文件都有name, type, size 属性， filelist[0].size 表示文件大小。

　　如果想进一步读取文件，就要用到了，FileReader Api.  FileReader  是一个对象，使用之前，先实例化。读取方式有三种，FileReader.readAsArrayBuffer()    FileReader.readAsDataURL()   FileReader.readAsText() ，它们都接受一个文件，作为参数， 通过名字可以看出它们读取的方式不一样， arrayBuffer, 读取的结果以二进制数组返回。还有一个abort 方法，中断读取。

　　读取的过程中会有几个事件：

　　Onload, onerror, onprogress. 这和ajax 是一致的，读取完成后，触发onload 事件。Onload事件里面通过this.resault 获取了读取的结果。

dragZone.ondrop = function(e){   // 打开方式是以链接的方进打开，阻止默认行为

            var filefirst = e.dataTransfer.files[0];
            var fileR = new FileReader();
            fileR.readAsDataURL(filefirst);
            fileR.onload = function(){
                var img = document.createElement("img");
                img.src = this.result;
                dragZone.appendChild(img);
            }
            e.preventDefault();

        }