htmlテーブルセルを純粋なjavascriptとhtmlにドラッグ＆ドロップ

テーブルと画像を含む静的WebPageを作成しようとしています。私は私の画像をドラッグ可能にすることができる純粋なJavaScriptコードを使用する必要があります。ここに私のHTMLコード：htmlテーブルセルを純粋な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>

だから私の最初の問題は、画像の取得は、左のセルのテーブルに、すべての細胞にのみ削除されます。 2番目の問題は、ドラッグアンドドロップが実行されたときに、イメージが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テーブルセルを純粋なjavascriptとhtmlにドラッグ＆ドロップ

答えて

関連する問題