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

  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();

        }
04-16 00:32