拖放html表格单元格pure javascript和html

我试图制作包含表格和图片的静态WebPage。我只能使用纯粹的JavaScript代码，这使我可以使我的图片可拖动。这里我的HTML代码：拖放html表格单元格pure 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>

所以我的第一个问题是图像掉下只有左单元格表，而不是所有的细胞。然后第二个问题是拖放完成后，图像应该从startDrag单元中删除，并且只出现在目标单元格中。

来源

2017-04-11 mb1510

@GauravChaudhary但我没有得到你的意思！ – mb1510

使用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>

来源

2017-04-11 09:44:49

拖放html表格单元格pure javascript和html

回答

相关问题