HTML5 拖拽程式碼例項
前端人員對於IE瀏覽器的印象普遍不是太好,對於標準支援滯後甚至不支援。
IE並非事事落後,HTML5 drag and drop拖拽標準就是從IE發展而來,但並沒有做到善始善終。
發展歷程簡略總結如下:
(1).IE4瀏覽器加入拖拽功能,但是能力有限,只有文字和圖片可以被拖拽,只有文字可以作為放置目標。
(2).IE5瀏覽器提升了拖拽功能,幾乎所有的元素都可以作為放置目標。
(3).IE5.5瀏覽器進一步提升拖拽功能,網頁幾乎所有元素都可以被拖拽。
(4).當前的拖拽標準就是從IE瀏覽器發展而來。
下面分享一段通過HTML5標準實現的拖拽效果,本版塊其他文章會對其進行詳細分解。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> p{ width:100px; height:50px; background-color:red; } #box { width:300px; height:200px; background-color:#ccc; } </style> <script> window.onload=function(){ let odiv=document.getElementById("box"); let op=document.getElementById("p"); op.ondragstart = (ev) => { ev.dataTransfer.setData("Text",ev.target.id); } odiv.ondragover = (ev) => { ev.preventDefault(); } odiv.ondrop = (ev) => { ev.preventDefault(); let data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } } </script> </head> <body> <p draggable="true" id="p"></p> <div id="box"></div> </body> </html>
上面程式碼演示了拖拽功能,可以將頂部的紅色矩形拖拽到底部較大的矩形中。
相關文章
- drag拖拽程式碼例項
- HTML5 localStorage使用演示程式碼例項HTML
- Draggable 拖拽例項
- HTML5利用canvas繪製矩形程式碼例項HTMLCanvas
- HTML5自帶表單驗證程式碼例項HTML
- 利用html5實現的飛雪效果程式碼例項HTML
- html5拖動上傳圖片效果程式碼例項HTML
- 使用HTML5繪製實體和空心文字程式碼例項HTML
- html5利用canvas圓形和多邊形程式碼例項HTMLCanvas
- 如何利用html5呼叫手機攝像頭程式碼例項HTML
- jQuery is() 程式碼例項jQuery
- html5拖拽HTML
- jQuery選項卡例項程式碼jQuery
- dom操作程式碼例項
- javascript的for in例項程式碼JavaScript
- requestAnimationFrame()動畫例項程式碼requestAnimationFrame動畫
- $$和||使用程式碼例項
- js刮刮樂程式碼例項JS
- canvas刮刮樂程式碼例項Canvas
- css梯形程式碼例項CSS
- toJSON()程式碼例項JSON
- [轉]BDB例項程式碼
- IOS程式碼例項區iOS
- js監聽鍵盤事件程式碼例項例項JS事件
- JavaScript in運算子程式碼例項JavaScript
- 設計模式例項程式碼設計模式
- table表格美化程式碼例項
- js使用XMLHttpRequest例項程式碼JSXMLHTTP
- jQuery操作cookie程式碼例項jQueryCookie
- jQuery 動畫效果程式碼例項jQuery動畫
- DeviceMotionEvent程式碼優化例項dev優化
- javascript操作xml程式碼例項JavaScriptXML
- table表格使用程式碼例項
- JavaScript confirm() 程式碼例項JavaScript
- js confirm()程式碼例項JS
- hasOwnProperty()函式程式碼例項函式
- javascript Function()使用程式碼例項JavaScriptFunction
- css切角效果程式碼例項CSS