HTML5拖动时移动元素

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

使元素在y轴上可拖动 轴心国

当用户开始拖动 元素，它开始在y轴上移动 轴心国

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>

你好！ $（“div”） .bind（'dragstart'，函数（事件）{ console.log（'dragstart'）； }) .bind（'drag'，函数（事件）{ /*启动伪代码*/ 如果（y>50px）{ 别拖了 启动动画 } /*结束伪码*/ log（'drag'）； }) .bind（'dragend'，函数（事件）{ console.log（'end'）； }) .bind（'drop'，函数（事件）{ console.log（'drop'）； }); 我在控制台中得到的唯一日志是dragstart。

$（文档）.ready（函数（）{
$（'newschool.dragme'）
.attr（'draggable'，'true'）
.bind（'dragstart'，函数（ev）{
var dt=ev.originalEvent.dataTransfer；
dt.setData（“文本”，“放入区域！”）；
返回true；
})
.bind（'dragend'，函数（ev）{
返回false；
});
$（'newschool.drophere'）
.bind（'dragenter'，函数（ev）{
$（ev.target）.addClass（'dragover'）；
返回false；
})
.bind（'dragleave'，函数（ev）{
$（ev.target）.removeClass（'dragover'）；
返回false；
})
.bind（'dragover'，函数（ev）{
返回false；
})
.bind（'drop'，函数（ev）{
var dt=ev.originalEvent.dataTransfer；
警报（dt.getData（'Text'））；
返回false；
});
});

拖我！
到这里来！
谢谢！我想要的是，实际的元素本身在拖动时会移动，而不仅仅是它的一个透明副本。那能做到吗？