Drag Drop with SVG

by jado66

HTML

<body>
    <!-- Drag Table -->

    <!-- <svg width="50" height="50">    //***!!!!***!!! I want to replace both <img> with inline <svg> and have my code work ***!!!!***!!!
        <rect x="0" y="0" width="50" height="50" style="fill:white;stroke:black;stroke-width:6" />
    </svg> -->
    <table style="border-spacing: 5px;">
        <tr>
            <td id="svg1">
                <!-- image src replaced with random image for JS.fidde. Was a local .svg--> 
                <div class = "cell" ondrop="drop(event)" ondragover="allowDrop(event)">
                    <img class = "droppable newGate" src="https://picsum.photos/500/500?random=1"   
                  ondragstart="dragStart(event)" id="1" draggable="true" /> </div>
            </td>
            <td id="svg2">
                <div class = "cell " ondrop="drop(event)" ondragover="allowDrop(event)">
                    <img class = "droppable" src="https://picsum.photos/500/500?random=2"   
                  ondragstart="dragStart(event)" id="2" draggable="true"/> </div>
            </td>

        </tr>
    </table>
    <hr>
    <!-- Drop Table -->
    <table>
        <tr>
            <td>
                <table id="dropTable" >
                <tr >
                    <td> <div class = "cell"></div></td> 
                    <td> <div class = "cell" ></div></td>
                    <td> <div class = "cell" ></div></td>
                    <td> <div class = "cell" ></div></td>
                </tr>
                <tr>
                    <td> <div class = "cell" ></div></td>
                    <td> <div class = "cell" ></div></td>
                    <td> <div class = "cell" ></div></td>
                    <td> <div class = "cell" ></div></td>
                </tr>
                </table>
            </td>
        </tr>
    </table>

CSS

* {user-select: none; } 
.cell {width:50px;height:50px;
  }
img {width:50px;height:50px;cursor: move;}
table td #dropTable td:hover{background: #dedede;}
#dropTable {
    border-spacing: 5px;
    border: 1px solid #dedede;
}
.droppable:hover{
    transform: scale(1.05);
    transition-duration: 0.3s;
}

#dropTable tbody { height:300px; overflow-y:auto;  }

JavaScript

const cells = document.querySelectorAll(".cell:empty"); //We only want to add event listeners to empty cells
for (const cell of cells){
    cell.addEventListener('dragover',allowDrop);
    cell.addEventListener('drop',drop);
}

function dragStart(evt)
{
    evt.dataTransfer.setData("Text",evt.target.id);
}

function drop(evt)
{
    var data = evt.dataTransfer.getData("Text");
    var nodeCopy = document.getElementById(data).cloneNode(true);
    nodeCopy.id = Date.now(); /* We cannot use the same ID */
    evt.target.appendChild(nodeCopy);
}

function allowDrop(ob)
{
    ob.preventDefault();
}