HTML5 move element while dragging

There's something really simple I want to do via the HTML5 drag and drop API:

1. Make an element draggable on the y axis.
2. When the user starts dragging the element, it start开发者_Python百科s moving on the y axis.
3. After 50px downwards on the y axis, the dragging should stop and an animation takes over.

This is what I've got:

<div draggable="true">Hi there!</div>

<script>
$('div')
.bind('dragstart', function(event) {

    console.log('dragstart');
})
.bind('drag', function(event) {

    /* start pseudo code */

    if(y > 50px) {
        stop dragging
        start animation
    }

    /* end pseudo code */

    console.log('drag');
})
.bind('dragend', function(event) {

    console.log('end');
})
.bind('drop', function(event) {

    console.log('drop');
});
<script>

The only log in the console I get is dragstart.

---

$(document).ready(function() {
    $('#newschool .dragme')
        .attr('draggable', 'true')
        .bind('dragstart', function(ev) {
            var dt = ev.originalEvent.dataTransfer;
            dt.setData("Text", "Dropped in zone!");
            return true;
        })
        .bind('dragend', function(ev) {
            return false;
        });
    $('#newschool .drophere')
        .bind('dragenter', function(ev) {
            $(ev.target).addClass('dragover');
            return false;
        })
        .bind('dragleave', function(ev) {
            $(ev.target).removeClass('dragover');
            return false;
        })
        .bind('dragover', function(ev) {
            return false;
        })
        .bind('drop', function(ev) {
            var dt = ev.originalEvent.dataTransfer;
            alert(dt.getData('Text'));
            return false;
        });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="newschool">
    <div class="dragme">Drag me!</div>
    <div class="drophere">Drop here!</div>
</div>