舉例如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function run1() { var s = document.getElementById( "show1" ); s.innerHTML = "Dragged!" ; } function run2() { var s = document.getElementById( "show2" ); s.innerHTML = "Dropped!" ; } /* 《程式語言教學誌》的範例程式 檔名:event026.js 功能:示範 JavaScript 程式 作者:張凱慶 時間:西元 2011 年 8 月 */ |
此例利用滑鼠進行拖的動作由 run1() 進行,網頁會在 id 屬性為 show1 的元素 (element) 中印出提示訊息 Dragged!
2 3 | var s = document.getElementById( "show" ); s.innerHTML = "Dragged!" |
我們以下面的 HTML 文件載入
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> < html > < head > < title >HTML DOM DEMO</ title > < script src = "event026.js" type = "text/javascript" ></ script > </ head > < body > < textarea ondrop = "run2();" ></ textarea > < div ondrag = "run1();" >There is no spoon.</ div > < div >Result1: < span id = "show1" ></ span ></ div > < div >Result2: < span id = "show2" ></ span ></ div > </ body > </ html > <!-- 《程式語言教學誌》的範例程式 檔名:event026.html 功能:示範 JavaScript 程式 作者:張凱慶 時間:西元 2011 年 8 月 --> |
其中第一個 <div> 元素設置 ondrag 屬性,當使用者選取其中文字,進行拖的動作之時,就會執行 run1()
9 | < div ondrag = "run1();" >There is no spoon.</ div > |
瀏覽器開啟網頁檔案,拖出選取的 spoon 文字,結果如下

中英文術語對照 | |
---|---|
屬性 | attribute |
元素 | element |
瀏覽器 | broswer |
您可以繼續參考
HTML 元素的事件處理屬性
- 拷貝 oncopy
- 剪下 oncut
- 貼上 onpaste
- 離開焦點 onblur
- 更改 onchange
- 點擊 onclick
- 雙重點擊 ondbclick
- 進入焦點 onfocus
- 按住按鍵 onkeydown
- 按按鍵 onkeypress
- 釋放按鍵 onkeyup
- 按住滑鼠 onmousedown
- 滑鼠移動 onmousemove
- 離開目標元素 onmouseout
- 進入目標元素 onmouseover
- 釋放滑鼠 onmouseup
- 滾動滑鼠滾輪 onmousewheel
- 調整瀏覽器視窗大小 onresize
- 使用滑鼠滾輪 onscroll
- 滑鼠「拖」 ondrag
- 滑鼠「放」 ondrop
- 載入網頁 onload
相關目錄
HTML DOM 快速導覽
JavaScript 教材
首頁
參考資料
http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html
沒有留言:
張貼留言