By Anney
 將 yellow 搬移至 blue 。 blue 允許放入 yellow , red 不允許放。 進入 blue 時, blue 要改變 border size 與 color                              ...
   將黃色區塊拖拉至藍色區塊    ◦ 允許 yellow 可以被拖拉。    ◦ over blue, add style      border: solid 2px red;    ◦ out blue, remove border...
   draggable attribute    ◦ boolean    ◦ text selections, images and links 預設為      true, 其餘 element 預設為 false 。         ...
   blue - ondragenter                         01/07/13   5
   blue - ondragleave                         01/07/13   6
   blue – ondrop, ondragover   red – ondragstart                                01/07/13   7
   event 會在拖曳的不同階段被觸發。值得注意的是    僅有 drag event 會發生,其他的滑鼠事件    ( 如 mousemove) 是不會發生的。    ◦   dragstart (source)    ◦   drag...
 dataTransfer object preventDefault method                          01/07/13   9
 All drag events have a property called   dataTransfer which is used to hold the drag data. The DataTransfer object is u...
void addElement(in Element element)void clearData([in String type])String getData(in String type)void setData(in String ty...
01/07/13   12
 必須適時執行這個方法,來避免預設的動作被執行  。 非輸入的 Element dragover 事件 , 預設不允許  Drop 。    ◦ ondragover 中一定要執行 preventDefault() , ondrop    ...
 https://  developer.mozilla.org/zh-TW/docs/DragDrop/Drag_and https://  developer.mozilla.org/en-US/docs/DragDrop/Drag_O...
01/07/13   15
Upcoming SlideShare
Loading in...5
×

20121108 html5 drag_drop

211

Published on

HTML5 Drag&Drop

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
211
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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

×