HTML Moveable Image

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9, #div10, #div11, #div12, #div13, #div14 {
    float: left;
    width: 35px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
</style>
<script>
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.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Square-symbol.svg/2000px-Square-symbol.svg.png" draggable="true" ondragstart="drag(event)" id="drag1" width="35" height="35">

</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div9" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div10" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div11" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div12" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div13" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div14" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>

</html>