實現將一個圖片拖拽到一個div的程式
阿新 • • 發佈：2018-12-17
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function allowDrop(ev) { // 除去預設的方式，預設是不可拖拖拽的 ev.preventDefault(); } function drag(ev) { // 設定拖拽的資料，資料型別為text，其實傳的就是它的id 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> <!--ondragover設定拖拽完的位置，ondrop設定滑鼠放置之後發生的事件--> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="height: 200px;border: solid"></div> <!--設定圖片為可拖拽，並設定拖拽時觸發的函式drag--> <img id="drag1" src="1.jpg" draggable="true" ondragstart="drag(event)" width="100px" height="69" /> </body> </html>