Drag & drop
- 1. HTML5 Drag Drop By 老刘 (hugo)
- 2. History It all begins with IE4. IE4 首先引入了拖拽概念 IE >= 4 都支持拖拽 4<= IE < 9 只支持 2 种元素拖拽 1. <a href=“#” >draggable</a> 2. <img src=“some.img” /> demo
- 3. Events draggableNode 支持以下 event ： dragstart dragend drag dragenter targetNode 支持以下 event ： dragover dragenter dragleave drop
- 4. Event 注册 draggableNode.observe('dragstart', onDragstart) .observe(‘dragend', onDragend); dropZone.observe(‘dragenter’, onDragenter) .observe(‘dragleave’, onDragleave) .observe(‘dragover’, onDragover) .observe(‘drop’, onDrop); $(Document.body).observe(‘drag’, onDrag); demo
- 5. Key Note 如果想让一个元素成为有效的拖拽目标，这个元素必须绑定 dragover & drop 事件。 必须绑定 dragover 的原因是除非你取消了浏览器的 dragover 的默认事件 ( 即调用 event.preventDefault()) ，不然 drop event 不会被触发。 drop, dropend: Safari & Chrome 先触发 dragend, firefox & IE 先触 发 drop. dragenter & dragleave 不是必须的
- 6. dataTransfer Properties : 1. effectAllowed 2. dropEffect Methods: 1. setData(dataType, data) 2. setData(dataType) 3. clearData(dataType)
- 7. effectAllowed & dropEffect 的值设定可以改变 cursor 的值，以此给用户反馈，哪个区域可以 drop 以及当前拖拽是什么类型的动作。 Properties dropEffects copy link move none (default) effectAllowed move copy link copyLink linkMove all none
- 8. 在 dragstart 事件设定 effectAllowd 在 dragover 设置 dropEffect 这 2 个值应该保持一致 在 firefox 中，不能在 drag 事件中不能调用 dataTransfer.setData 方法 在 safari4.0.4 中不能将 effectAllowed 设置为 ‘ move’
- 9. Methods dataTransfer 中的 setData, getData 和 clearData 与 clipboardData 基本类似。 它们的第一个参数为 string, 用来描述 data 的类型。目前所有浏览器都支持的只有 2 个： Text, URL 。 如果传给 setData 的两个参数不匹配的话，拖拽就会失败。 clearData 用来清除一个或多个通过 setData 设置的值，在 html5 拖拽文件也可以清除 dataTransfer 的 file 。
- 10. HTML 5 HTML5 继承了 IE 的 Dragdrop 事件。 与 IE 的不同， HTML5 所有的元素都支持拖拽，只要在元素中加入 draggable=“true”, 这个元素就可以拖拽了。 demo
- 11. Cross frame drag drop 支持 iframe 之间拖拽。 Bug: IE 中 setData 只能设置 Text, 不能设置 URL ，如果设置 URL ，另一个 iframe 调用 getData(‘URL’) 为 null demo
- 12. File 属性： name size type fileType/ fileSize （不属于标准） 方法 (deprecated ，已经不再支持 ) getAsBinary getAsDataURL getAsText
- 13. FileReader 浏览器支持： firefox3.6 chrome opera 11.1+ Safari 6 IE10 方法： readAsBinaryString readAsDataURL readAsText readAsArrayBuffer 属性： result （文件的内容，只有当文件 load 完毕才可用） readyState error
- 14. FileReader Event: abort error load loadend(it’s called whether success or not) loadstart progress (loaded total) 在 chrome13.0 中， FileReader 不支持 addEventListener ，所以以上事件只能由 on + event = function(e){};
- 15. FileReader Code excert var reader = New FileReader(); reader.onreadystatechange = function(e){ e = e || window.event; switch(e.readyState){ case 1: console.log(‘file is loading’); break; case 2: console.log(‘file has been loaded’); break; case 0: console.log(‘nothing happened yet’); break; default: } }; reader.readAsDataURL(file);
- 16. File & FileReader 在 Firefox 下， File 本身的 getAsDataURL 也可以以 base64 编码读取文件的内容。 File.getAsDataURL 与 FileReader.readAsDataURL 区别是， FileRearder.readAsDataURL 是异步读取文件，不会影响 UI 。 上述两者的区别估计是标准不再支持 File 的 getAsDataURL 的很大原因
- 17. 拖拽文件与上传 浏览器支持： 一般只要支持 FileReader 即支持拖拽文件，和 Ajax 上传文件 dataTransfer.files File.name size type fileType fileSize
- 18. XMLHttpRequest 文件上传 XMLHttpRequest 支持 file post 请求 var xhr = new XMLHttpRequest(); xhr.setRequestHeader(‘Content-Type’, ‘application/octet-stream’); xhr.send(file); Or Var reader = new FileReader(); Reader.onload = function(e){ xhr.send(e.target.result); }; Reader.readAsBinaryString(file); Or xhr.sendAsBinary(file);//firefox 中支持
- 19. XMLHttpRequest 支持的 events: progress, load, error progress event 中的 loaded 和 total 属性可以用来表示上传进度 If(event.lengthComputable){ var percent = event.loaded/event.total } lengthComputable 用来表示文件总大小是否已知
- 20. 断点续传 Firefox: 目前的想法是先调用 File 的 getAsDataURL 方法把 file 进行 base64 编码，然后进行切割。 Chome: chrome 的 File 目前不支持 getAsDataURL, 但它的 File API 继承自 Blob ，可以调用 slice 方法， slice 返回的是一个 Blob 。 Firefox4 也会实现。 因为 FileReader 在 firefox 和 chrome 都被支持，所以也可以用它来实现， FileReader 在这两种浏览器中都支持 readAsDataURL