下一代HTML5之拖拽
阿新 • • 發佈：2018-12-19
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>逆水行舟不進則退</title> <style type="text/css"> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script> function allowDrop(ev) { // 阻止預設的，預設是已瀏覽器開啟 ev.preventDefault(); } function drag(ev) { // 設定拖拽的資料，型別的是text，把圖片變為id ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { // 獲取資料圖片id，然後新增到這個位置 ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>拖動 RUNOOB.COM 圖片到矩形框中:</p> <!--ondrop設定放下的時候的事件--> <!--ondragover設定拖拽之後的位置--> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <!--draggable設定可拖拽,ondragstart拖拽的時候發生的事件--> <img id="drag1" src="1.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>