Drag & drop
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,433
On Slideshare
1,430
From Embeds
3
Number of Embeds
2

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 3

http://www.verious.com 2
http://localhost 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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