CODEWITHSUNDEEP
javascripthtmlcss
mb1510
mb1510

Reputation: 1

Drag and drop html table cells pure javascript and html

I'm trying to make static WebPage which contains Table and an image. I have to use only pure JavaScript code that allows me to make my picture draggable. here my HTML code:

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>

So my first problem is the image get dropped only to the Left cell table, not to all cells. then the second problem is when the drag-and-drop is done, the image should be removed from the startDrag cell and appear only in the destination cell.

Upvotes: 0

Views: 6318

Answers (1)

Gaurav Chaudhary
Gaurav Chaudhary

Reputation: 1501

Use HTML 5 drag and drop feature

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>

Upvotes: 3

Related Questions