Drag and Copy (Shift 4 not Drop)

HTML

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

    <table style="border-spacing: 5px;">
        <tr>
            <td id="svg1">
                <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>
            <td id="svg2">
                <div class = "cell " ondrop="drop(event)" ondragover="allowDrop(event)">
                    <img class = "droppable" src="https://picsum.photos/500/500?random=3"   
                  ondragstart="dragStart(event)" id="3" draggable="true"/> </div>
                
            </td>

        </tr>
    </table>
    <hr>
    <!-- Drop Table -->
    <table>
        <tr>
            <td>
                <table id="dropTable" >
                <tr >
                    <td> <div class = "cell" ondragenter="dragEnter(event)"></div></td> 
                    <td> <div class = "cell" ondragenter="dragEnter(event)"></div></td>
                    <td> <div class = "cell" ondragenter="dragEnter(event)"></div></td>
                    <td> <div class = "cell" ondragenter="dragEnter(event)"></div></td>
                    <td> <div class = "cell" ondragenter="dragEnter(event)"></div></td>
                    <td> <div class = "cell" ondragenter="dragEnter(event)"></div></td>
                </tr>
                <tr>
                    <td> <div class = "cell" ondragenter="dragEnter(event)"></div></td>
                    <td> <div class = "cell" ondragenter="dragEnter(event)"></div></td>
                    <td> <div...

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);
}

let dragId = null;

function dragStart(evt)
{
    dragId = evt.target.id;
}

function dragEnter(evt)
{
    if (evt.shiftKey && dragId){
        var nodeCopy = document.getElementById(dragId).cloneNode(true);
        nodeCopy.id = Date.now(); /* We cannot use the same ID */
        evt.target.innerHTML = "";
        evt.target.appendChild(nodeCopy);
    }
}

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);
    dragId = null;
}

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