20121108 html5 drag_drop

417 views

Published on

HTML5 Drag&Drop

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

No Downloads
Views
Total views
417
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

20121108 html5 drag_drop

  1. 1. By Anney
  2. 2.  將 yellow 搬移至 blue 。 blue 允許放入 yellow , red 不允許放。 進入 blue 時, blue 要改變 border size 與 color 01/07/13 2
  3. 3.  將黃色區塊拖拉至藍色區塊 ◦ 允許 yellow 可以被拖拉。 ◦ over blue, add style  border: solid 2px red; ◦ out blue, remove border style. ◦ drop into blue, move yellow to blue. 01/07/13 3
  4. 4.  draggable attribute ◦ boolean ◦ text selections, images and links 預設為 true, 其餘 element 預設為 false 。 01/07/13 4
  5. 5.  blue - ondragenter 01/07/13 5
  6. 6.  blue - ondragleave 01/07/13 6
  7. 7.  blue – ondrop, ondragover red – ondragstart 01/07/13 7
  8. 8.  event 會在拖曳的不同階段被觸發。值得注意的是 僅有 drag event 會發生,其他的滑鼠事件 ( 如 mousemove) 是不會發生的。 ◦ dragstart (source) ◦ drag (source) ◦ dragenter (target) ◦ dragover (target) ◦ dagleave (target) ◦ dragend (source) ◦ drop (target) 01/07/13 8
  9. 9.  dataTransfer object preventDefault method 01/07/13 9
  10. 10.  All drag events have a property called  dataTransfer which is used to hold the drag data. The DataTransfer object is used to hold the data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types. 01/07/13 10
  11. 11. void addElement(in Element element)void clearData([in String type])String getData(in String type)void setData(in String type, in String data)void setDragImage(in nsIDOMElement image, in long x, in long y)ps.nsIDOMElement: This interface represents an element in an HTML or XML document. 01/07/13 11
  12. 12. 01/07/13 12
  13. 13.  必須適時執行這個方法,來避免預設的動作被執行 。 非輸入的 Element dragover 事件 , 預設不允許 Drop 。 ◦ ondragover 中一定要執行 preventDefault() , ondrop 事件才會被觸發。 01/07/13 13
  14. 14.  https:// developer.mozilla.org/zh-TW/docs/DragDrop/Drag_and https:// developer.mozilla.org/en-US/docs/DragDrop/Drag_Ope http:// www.w3schools.com/html/html5_draganddrop.asp http://zh.wikipedia.org/wiki/Gecko 01/07/13 14
  15. 15. 01/07/13 15

×