拖拽要有两个元素,一个是要拖动的元素,一个是要放置到的元素。
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(); }