Question

我想通过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>

我得到的控制台中唯一的日志是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>

拖动时HTML5移动元素

1 个答案: