拖动时 HTML5 移动元素

Question

我想通过 HTML5 拖放 API 做一些非常简单的事情：

1. 使元素在 y 上可拖动 轴。
2. 当用户开始拖动 元素，它开始在 y 上移动 轴。
3. 在 y 轴向下 50px 后， 拖动应该停止并且 动画接管。

这就是我所拥有的：

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