HTML5中用Javascript实现拖放功能

Question

尝试在HTML5中进行简单的拖放示例，但当我将图像放在

元素中时，出现以下错误。

Uncaught TypeError：无法设置null的innerHTML属性。

因此，我认为错误消息意味着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;
});

- PeteGO

Answer 1

dataTransfer是原始事件对象的一部分，而不是jQuery事件对象。请改用e.originalEvent： 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;
});

- pimvdb

---

投票支持，因为那确实是一个问题，但不是导致“Uncaught TypeError: Cannot set property 'innerHTML' of null”错误的问题。该错误是由以下行引起的：dragElement.innerHTML = this.innerHTML; - PeteGO

@Pete Oakey：这个小提琴在我这里运行良好，没有任何错误。你遇到了其他问题吗？ - pimvdb

我不这么认为。为什么在dragstart事件中e.dataTransfer可以正常工作，但在drop事件中却不能？顺便说一下，我正在拖放一个图像元素 - 如果有区别的话！ - PeteGO

无论哪种情况下都不应该是可用的。在这个范例程序中，我已经在各处使用了 e.originalEvent.dataTransfer。 - pimvdb

抱歉 - 在尝试修复期间更改了我的img元素的ID。现在已经改回来了，一切都正常 :) - PeteGO