在 HTML5 中拖放的 Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8189918/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript to Drag and Drop in HTML5
提问by PeteGO
Trying to do a simple drag and drop example in HTML5 - but when I drop the image into the div element I get the following error.
尝试在 HTML5 中做一个简单的拖放示例 - 但是当我将图像放入 div 元素时，我收到以下错误。
Uncaught TypeError: Cannot set property 'innerHTML' of null
未捕获的类型错误：无法设置 null 的属性“innerHTML”
So I assume the error message means dragElement is null. I don't understand why though, because I set it in the dragstart event to be the HTML of the img element.
所以我假设错误消息意味着 dragElement 为空。我不明白为什么，因为我在 dragstart 事件中将它设置为 img 元素的 HTML。
Anyone know how to make this work?
有谁知道如何使这项工作？
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;
});
回答by pimvdb
dataTransferis part of the original event object, not the jQuery one. Use e.originalEventinstead: http://jsfiddle.net/KWut6/.
dataTransfer是原始事件对象的一部分，而不是 jQuery 对象。使用e.originalEvent来代替：http://jsfiddle.net/KWut6/。
e.originalEvent.dataTransfer ...
HTML
HTML
<image src="http://lorempixum.com/100/100/" draggable="true" id="x">
<div id="drop-box">a</div>
JavaScript
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;
});
