在 HTML5 中拖放的 JavaScript

尝试在 HTML5 中执行一个简单的拖放示例 - 但是当我将图像放入 div 元素中时，出现以下错误。

未捕获的类型错误：无法将属性“innerHTML”设置为 null

所以我假设错误消息意味着dragElement为空。我不明白为什么，因为我在dragstart事件中将其设置为img元素的HTML。

有人知道如何进行这项工作吗？

var dragElement = null;

$('#x').bind('dragstart', function (e) {
    dragElement = this;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);
});

$('#drop-box').bind('dragover', function (e) {
    e.preventDefault();
    return false;
});

$('#drop-box').bind('drop', function (e) {
    e.preventDefault();
    if (e.stopPropagation) {
        e.stopPropagation();
    }

    if (dragElement != this) {
        dragElement.innerHTML = this.innerHTML;
        this.innerHTML = e.originalEvent.dataTransfer.getData('text/html');
    }

    return false;
});

dataTransfer是原始事件对象的一部分，而不是 jQuery 的一部分。使用e.originalEvent反而：http://jsfiddle.net/KWut6/ http://jsfiddle.net/KWut6/.

 e.originalEvent.dataTransfer ...

HTML

<image src="http://lorempixum.com/100/100/" draggable="true" id="x">
<div id="drop-box">a</div>

JavaScript

var dragElement = null;

$('#x').bind('dragstart', function (e) {
    dragElement = this;
    e.originalEvent.dataTransfer.effectAllowed = 'move';
    e.originalEvent.dataTransfer.setData('text/html', this.innerHTML);
});

$('#drop-box').bind('dragover', function (e) {
    e.preventDefault();
    return false;
});

$('#drop-box').bind('drop', function (e) {
    e.preventDefault();
    if (e.stopPropagation) {
        e.stopPropagation();
    }

    if (dragElement != this) {
        dragElement.innerHTML = this.innerHTML;
        this.innerHTML = e.originalEvent.dataTransfer.getData('text/html');
    }

    return false;
});