Más contenido relacionado 20121108 html5 drag_drop2. 將 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
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
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