HTML5 Drag&Drop

1. By Anney

2.  將 yellow 搬移至 blue 。
 blue 允許放入 yellow ， red 不允許放。
 進入 blue 時， blue 要改變 border size 與 color
01/07/13 2

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.  draggable attribute
◦ boolean
◦ text selections, images and links 預設為
true, 其餘 element 預設為 false 。
01/07/13 4

5.  blue - ondragenter
01/07/13 5

6.  blue - ondragleave
01/07/13 6

7.  blue – ondrop, ondragover
 red – ondragstart
01/07/13 7

8.  event 會在拖曳的不同階段被觸發。值得注意的是
僅有 drag event 會發生，其他的滑鼠事件
( 如 mousemove) 是不會發生的。
◦ dragstart (source)
◦ drag (source)
◦ dragenter (target)
◦ dragover (target)
◦ dagleave (target)
◦ dragend (source)
◦ drop (target)
01/07/13 8

9.  dataTransfer object
 preventDefault method
01/07/13 9

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. 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. 01/07/13 12

13.  必須適時執行這個方法，來避免預設的動作被執行
。
 非輸入的 Element dragover 事件 , 預設不允許
Drop 。
◦ ondragover 中一定要執行 preventDefault() ， ondrop
事件才會被觸發。
01/07/13 13

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. 01/07/13 15