<!DOCTYPE html>
<html>
<head>
    <title>Javascript 1 - Kmom ?</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style/style.css">
    <script type="text/javascript">
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("Text",ev.target.id);
            console.log('id of draggable element: ' + ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script> 
</head>
<body>
    <h1>Move the image</h1><p>Drag and drop the image and move it into the frame!</p>
    <div id="content">
    <div id="dropZoneOne" class="dropZone" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img src="img/tux.jpg" id="dragMe" class="dragMe" draggable="true" ondragstart="drag(event)">
    </div>
    <div id="dropZoneTwo" class="dropZone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </div>
    <!-- <script type="text/javascript" src="js/main.js"></script> -->
</body>
</html>