[英]Drag and drop html table cells pure javascript and html
我正在嘗試制作包含表和圖像的靜態WebPage。 我只需要使用純JavaScript代碼即可使圖片可拖動。 這是我的HTML代碼：
function FirstJob(){ myPic = document.getElementById('refImage'); myPic.addEventListener("dragstart", startDrag, false); cloRef1 = document.getElementById('tr1_1'); // cloRef2 = document.getElementByID('tr1_2'); // cloRef3 = document.getElementByID('tr2_1'); // cloRef4 = document.getElementByID('tr2_2'); cloRef1.addEventListener("dragenter", function(e){e.preventDefault();}, false); cloRef1.addEventListener("dragover", function(e){e.preventDefault();} , false); cloRef1.addEventListener("drop", dropped , false); } function startDrag(e){ // save information about our element over the event startDrag var varImg = '<center><img id="refImage" src="http://media.idownloadblog.com/wp-content/uploads/2014/11/Google-Maps-4.0-for-iOS-app-icon-small.png"></center>'; e.dataTransfer.setData('myImg', varImg); } function dropped(e){ e.preventDefault(); cloRef1.innerHTML = e.dataTransfer.getData('myImg'); } window.addEventListener("load", FirstJob, false);
img{ width:50px; height:50px }
<html> <head> <title>Drag and Drop</title> <link rel="stylesheet" href="file.css"> <script src="file.js"></script> </head> <body> <center> <h3><li>Drag and Drop Section</li></h3> <table border="1" width="50%" height="50%"> <tr> <td><center><b>colonne 1</b></center></td> <td><center><b>colonne 2</b></center></td> </tr> <tr id="tr1"> <td id="tr1_1"> <center>drag something into me</center> </td> <td id="tr1_2"> <center><img id="refImage" src="http://media.idownloadblog.com/wp-content/uploads/2014/11/Google-Maps-4.0-for-iOS-app-icon-small.png"></center> </td> </tr> <tr id="tr2"> <td id="tr2_1"><center>drag something into me</center></td> <td id="tr2_2"><center>drag something into me</center></td> </tr> </table> </center> </body> </html>
所以我的第一個問題是圖像僅被拖放到Left單元格表，而不是所有單元格。 那么第二個問題是完成拖放操作后，應將圖像從startDrag單元格中刪除，並僅顯示在目標單元格中。
使用HTML 5拖放功能
myPic = document.getElementById('refImage'); 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.innerHTML='' ev.target.appendChild(document.getElementById(data)); }
img{ width:50px; height:50px } td{ width:60px; height:60px }
<html> <head> <title>Drag and Drop</title> </head> <body> <center> <h3><li>Drag and Drop Section</li></h3> <table border="1" width="50%" height="50%"> <tr> <td><center><b>colonne 1</b></center></td> <td><center><b>colonne 2</b></center></td> </tr> <tr id="tr1"> <td id="tr1_1" ondrop="drop(event)" ondragover="allowDrop(event)"> <center>drag something into me</center> </td> <td id="tr1_2"ondrop="drop(event)" ondragover="allowDrop(event)"> <center><img id="refImage" src="http://media.idownloadblog.com/wp-content/uploads/2014/11/Google-Maps-4.0-for-iOS-app-icon-small.png" draggable="true" ondragstart="drag(event)"></center> </td> </tr> <tr id="tr2"> <td id="tr2_1" ondrop="drop(event)" ondragover="allowDrop(event)"><center>drag something into me</center></td> <td id="tr2_2" ondrop="drop(event)" ondragover="allowDrop(event)"><center>drag something into me</center></td> </tr> </table> </center> </body> </html>
如何使用純 HTML、CSS 和 JavaScript 解決這種拖放問題
[英]How to solve this drag and drop using pure HTML, CSS and JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.