在 HTML5 中拖放的 Javascript
Posted
技术标签:
【中文标题】在 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>
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。改回来,现在一切正常:)以上是关于在 HTML5 中拖放的 Javascript的主要内容,如果未能解决你的问题,请参考以下文章
用于 Silverlight 中拖放的 TranslateTransform