HTML5 拖放
拖放
拖放(Drag和drop)是HTML5標準的一部分,任何元素都能夠拖放。拖放是一種常見的特性,即抓住物件以後拖到另一個位置。
瀏覽器支援
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支援拖放。
註釋:在 Safari 5.1.2 中不支援拖放。
HTML5 拖放例項
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" /> </body> </html>
程式碼解釋:
- 呼叫 preventDefault() 來避免瀏覽器對資料的預設處理(drop 事件的預設行為是以連結形式開啟)
- 通過 dataTransfer.getData("Text") 方法獲得被拖的資料。該方法將返回在 setData() 方法中設定為相同型別的任何資料。
- 被拖資料是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素(目標元素)中
我們可以分別研究拖放事件的不同部分。
1、設定元素為可拖放
首先,為了使元素可拖動,把draggable屬性設定為true:
<img draggable="true" />
2、拖動什麼-ondragstart和setData()
在上面的例子中,ondragstart 屬性呼叫了一個函式,drag(event),它規定了被拖動的資料。
dataTransfer.setData() 方法設定被拖資料的資料型別和值:
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }
3、放到何處 - ondragover
ondragover 事件規定在何處放置被拖動的資料。
預設地,無法將資料/元素放置到其他元素中。如果需要設定允許放置,我們必須阻止對元素的預設處理方式。
這要通過呼叫 ondragover 事件的 event.preventDefault() 方法:
event.preventDefault()
4、進行放置 - ondrop
當放置被拖資料時,會發生 drop 事件。
在上面的例子中,ondrop 屬性呼叫了一個函式,drop(event):
function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }
相關文章
- HTML5拖放HTML
- HTML5 拖放、交換位置HTML
- Html5的拖放功能HTML
- HTML5 進階系列:拖放 API 實現拖放排序HTMLAPI排序
- HTML5 拖放(Drag和drop)HTML
- HTML5拖放本地資源HTML
- HTML5 drag & drop 拖拽與拖放HTML
- HTML5學習筆記 拖放HTML筆記
- HTML5原生拖拽/拖放 Drag & Drop 詳解HTML
- Vue結合HTML5拖放API 實現目錄拖拽~VueHTMLAPI
- HTML 5 拖放HTML
- HTML5權威指南讀書筆記25(完結)(第37章)--使用拖放HTML筆記
- html5拖放--15行js程式碼實現兩個div內容互換HTMLJS
- chrome下的拖放事件Chrome事件
- H5 元素拖放H5
- tlistview使用--拖放操作 (轉)View
- javascript的拖放入門(轉)JavaScript
- dnd.js 拖放庫 Drag and DropJS
- 拖放排序外掛Sortable.js排序JS
- 指令碼div實現拖放功能指令碼
- 使用VB實現OLE拖放功能
- 拖放事件(自己的學習筆記)事件筆記
- Yoink for Mac(臨時檔案拖放助手)Mac
- javascript實現拖曳與拖放圖片JavaScript
- vue專案中加入拖放排序功能Vue排序
- H5拖放基礎和實戰H5
- Blazor 使用拖放(drag and drop)上傳檔案Blazor
- 「拖放」Mac 的底層能力,也是效率神技Mac
- [譯] 拖放庫中 React 效能的優化React優化
- ALV Grid控制元件拖放功能控制元件
- 自制支援檔案拖放的VCL元件 (轉)元件
- Jetpack DragAndDrop 庫——拖放操作如此輕鬆!Jetpack
- 30 個最棒的 jQuery 的拖放外掛jQuery
- 玩轉iOS開發:iOS 11 新特性《高階拖放》iOS
- 玩轉iOS開發:iOS 11 新特性《UICollectionView的拖放》iOSUIView
- 實現檔案拖放的一種簡潔方法 (轉)
- 使用IDropTarget介面同時支援文字和檔案拖放 (轉)
- 贊!帶進度條的 jQuery 檔案拖放上傳外掛jQuery