在 HTML5 中拖放的 Javascript

Posted 2023-05-08

【中文标题】在 HTML5 中拖放的 Javascript

【英文标题】：Javascript to Drag and Drop in HTML5

【发布时间】：2012-01-01 15:49:50

【问题描述】：

尝试在 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;
);

【参考方案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;
);

【讨论】：

投票是因为这是一个问题，但不是导致“未捕获的类型错误：无法设置属性 'innerHTML' of null”错误的问题。该错误是由以下行引起的：dragElement.innerHTML = this.innerHTML;

@Pete Oakey：小提琴对我来说很好用，没有任何错误。你有别的经历吗？

我不这么认为。为什么 e.dataTransfer 在 dragstart 事件上可以，但在 drop 事件上不行？顺便说一句，这是一个我正在拖放的图像元素 - 如果这有所作为！

它在任何一种情况下都不可用。在小提琴中，我到处都使用了e.originalEvent.dataTransfer。

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