Edit in JSFiddle

function onDragOver(e) {
    e.preventDefault();
    e.target.className = "over-me";
}

function onDragLeave(e) {
    e.target.className = "static";
}

function onDragStart(e) {
    e.target.innerHTML = "<h4>You are Dragging me</h4>";
    document.getElementById('dropzone').className = 'drop-into-me'
}

function onDragEnd(e) {
    e.target.innerHTML = "<h4>Drag Me into the Box :)</h4>";
    document.getElementById('dropzone').className = 'static'
    if (e.target.parentElement.id === "dropzone") {
        e.target.innerHTML = "<h4>Yayyy !! :)</h4>";
    }
}

function onDrop(e) {
    e.preventDefault();
    var draggableDiv = document.getElementById("a-draggable-div");
    draggableDiv.setAttribute("draggable", "false");
    e.target.appendChild(draggableDiv);
}
<div id="dropzone" class="static" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<br>
<div id="a-draggable-div" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)">
    <h4>Drag Me into the Box :)</h4>
</div>
#dropzone {
    width: 350px;
    height: 70px;
    padding: 10px;
}

.static {
    border: 1px solid #aaaaaa;
}

.drop-into-me {
    border: 1px dotted #aaaaaa;
}

.over-me {
    background-color: yellow;
    border: 1px dotted #aaaaaa;
}