What I'm trying to do: Drag content into drop zone when content is dropped show hidden class.

I've called the class I want to hide until drop: .hideme in the code snippet below:

    <script>

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

function dragStart(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function dragDrop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>

<div class="draggable-container"></div>
<div class="div1"
    ondrop="dragDrop(event)"
    ondragover="allowDrop(event)">
<div id="drag1"
    draggable="true"
    ondragstart="dragStart(event)"
    width="220"
    height="70">
   <p>Dragable Content</p> 
   <div class="hideme">Hide This Until Drop</div>
</div>
</div>

<div class="div1" id="dropzone"
    ondrop="dragDrop(event)"
    ondragover="allowDrop(event)">
</div>

I have tried googling this in every way my little brain can think of and I'm coming up with nothing. I'm not sure if it's just so obvious to anyone who knows how to write javascript that there aren't tutorials for it or if it's WAY more complicated than it seems? I'm desperate help!