Question

在一个面板中有一些图像，我想将它们拖到另一个面板：

  $('#resource img').bind('dragstart', function (evt) {
        evt.dataTransfer.setData('text', this.id);
    });

另一个小组接受了img：

        $('#draw').bind('dragover', function (evt) {
            evt.preventDefault();
        }).bind('dragenter', function (evt) {
            evt.preventDefault();
        }).bind('drop', function (evt) {
            evt.preventDefault();
            var id = evt.dataTransfer.getData('text'),
            $(this).append("<b>Hello"+id+"</b>");
        });

然而这不起作用，但是当我更改最后一个事件处理程序时：

.bind('drop', function (evt) {
                evt.preventDefault();
                  alert("!!!");
            });

这可行，为什么会发生这种情况，我该如何解决这个问题？

Answer 1

看起来你正在使用jQuery。你告诉jQuery用事件推送dataTransfer属性吗？ jQuery不会自动使用事件推送dataTransfer对象。也许有一天会改变，但目前必须使用这种解决方法。

$(document).ready(function () {    
    $.event.props.push('dataTransfer');
}

Answer 2

我确信为时已晚，但您可以访问原始事件属性，即：

evt.originalEvent.dataTransfer.setData('text', this.id);

Html5拖放和拖动效果有问题

2 个答案: