0
HTML5   Drag Drop By  老刘  (hugo)
History It all begins with IE4. IE4  首先引入了拖拽概念 IE >= 4  都支持拖拽 4<= IE < 9  只支持 2 种元素拖拽 1. <a href=“#” >draggable</a> 2. <im...
Events draggableNode 支持以下 event : dragstart dragend drag dragenter targetNode 支持以下 event : dragover dragenter dragleave drop
Event  注册 draggableNode.observe('dragstart', onDragstart)   .observe(‘dragend', onDragend); dropZone.observe(‘dragenter’, ...
Key Note <ul><li>如果想让一个元素成为有效的拖拽目标,这个元素必须绑定  dragover & drop  事件。 </li></ul><ul><li>必须绑定 dragover 的原因是除非你取消了浏览器的 dragover ...
dataTransfer <ul><li>Properties : </li></ul><ul><li>1. effectAllowed </li></ul><ul><li>2. dropEffect </li></ul><ul><li>Met...
<ul><li>effectAllowed & dropEffect  的值设定可以改变 cursor 的值,以此给用户反馈,哪个区域可以 drop 以及当前拖拽是什么类型的动作。 </li></ul>Properties dropEffect...
<ul><li>在 dragstart 事件设定 effectAllowd </li></ul><ul><li>在 dragover  设置 dropEffect </li></ul><ul><li>这 2 个值应该保持一致 </li></ul...
Methods <ul><li>dataTransfer  中的 setData, getData 和 clearData  与  clipboardData 基本类似。 </li></ul><ul><li>它们的第一个参数为 string, ...
HTML 5  HTML5  继承了 IE 的 Dragdrop 事件。 与 IE 的不同, HTML5 所有的元素都支持拖拽,只要在元素中加入  draggable=“true”, 这个元素就可以拖拽了。 demo
Cross frame drag drop <ul><li>支持 iframe 之间拖拽。 </li></ul><ul><li>Bug: IE  中 setData 只能设置  Text,  不能设置 URL ,如果设置  URL ,另一个 i...
File <ul><li>属性: </li></ul><ul><li>  name </li></ul><ul><li>size </li></ul><ul><li>type </li></ul><ul><li>fileType/ fileSi...
FileReader <ul><li>浏览器支持:  firefox3.6 chrome opera 11.1+ Safari 6 IE10   </li></ul><ul><li>方法:  </li></ul><ul><ul><li>read...
FileReader <ul><li>Event: </li></ul><ul><li>abort </li></ul><ul><li>error </li></ul><ul><li>load  </li></ul><ul><li>loaden...
FileReader <ul><li>Code excert </li></ul><ul><li>var reader = New FileReader(); </li></ul><ul><li>reader.onreadystatechang...
File & FileReader <ul><li>在 Firefox 下, File 本身的 getAsDataURL 也可以以 base64 编码读取文件的内容。 </li></ul><ul><li>File.getAsDataURL  与...
拖拽文件与上传 <ul><li>浏览器支持: 一般只要支持 FileReader 即支持拖拽文件,和 Ajax 上传文件 </li></ul><ul><li>dataTransfer.files </li></ul><ul><li>File.n...
XMLHttpRequest  文件上传 <ul><li>XMLHttpRequest  支持 file post 请求 </li></ul><ul><ul><li>var xhr = new XMLHttpRequest(); </li></...
XMLHttpRequest <ul><li>支持的 events:  progress, load, error </li></ul><ul><li>progress event  中的  loaded  和  total  属性可以用来表示...
断点续传 <ul><li>Firefox: </li></ul><ul><li>目前的想法是先调用 File 的 getAsDataURL  方法把 file 进行 base64 编码,然后进行切割。 </li></ul><ul><li>Cho...
Upcoming SlideShare
Loading in...5
×

Drag & drop

1,145

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,145
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Drag & drop"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×