HTML5 перемещать элемент при перетаскивании

Question

Есть кое-что действительно простое, что я хочу сделать через API перетаскивания HTML5:

1. Сделать элемент перетаскиваемым по оси Y.
2. Когда пользователь начинает перетаскивать элемент, он начинает двигаться по оси y.
3. После 50px вниз по оси y перетаскивание должно прекратиться, и анимация вступает во владение.

Вот что я получил:

<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>

Единственный журнал в консоли, который я получаю, - это dragstart.

Answer 1

$(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>