做拖拽相关效果时，想在ondragover时给被拖拽元素添加一些样式，于是在dragover事件的函数中通过dataTransfer.getData()获取在dragstart中设置的数据，然而发现dataTransfer.getData()所返回的数据为空。

查询资料发现dataTransfer.setData()中所设置的数据是存储在drag data store中，而根据W3C标准，drag data store有三种模式，Read/write mode, Read-only mode跟Protected mode。

W3C Working Draft中5.7.2.关于三种drag data store mode的定义

A drag data store mode, which is one of the following:

Read/write mode
For the dragstart event. New data can be added to the drag data store.

Read-only mode
For the drop event. The list of items representing dragged data can be read, including the data. No new data can be added.

Protected mode
For all other events. The formats and kinds in the drag data store list of items representing dragged data can be enumerated, but the data itself is unavailable and no new data can be added.

Read/write mode
读/写模式，在dragstart事件中使用，可以添加新数据到drag data store中。

Read-only mode
只读模式，在drop事件中使用，可以读取被拖拽数据，不可添加新数据。

Protected mode
保护模式，在所有其他的事件中使用，数据的列表可以被枚举，但是数据本身不可用且不能添加新数据。

这样就可以解释为什么dragover中dataTransfer.getData()返回的数据为空，以及在dragover时dataTransfer中的types不为0了，因为在除了dragstart,drop以外的事件，包括dragover,dragenter,dragleave中，drag data store出于安全原因处于保护模式，因此不可访问。

如果要实现dragover中访问dragstart中设置的数据，可以采用定义一个全局变量的方法，在dragstart中赋值，之后在dragend中清空。

另外，我在ondragover时，尝试给被拖拽元素添加class以改变其样式发现，虽然拖拽时class已经改变，但在拖拽过程中样式并没有改变，而是等到拖拽动作完成后，也就是drop之后样式才被应用上去，所以在dragover,dragenter,dragleave中做得更多的应该是对数据的处理，而不是应用效果。

另一个问题

我的项目在Chrome中所使用的情况完全符合上述描述，但是在运行如下代码时dragover,dragenter,dragleave中均可获取到dataTransfer中的数据。

<!doctype html>
<html>
<head></head>
<body>
<li id="oSource" data-name="source element" draggable="true" style="display:block;cursor:pointer;width:80px;height:50px;">测试锚</li>
<div id="oTarget"><span>将测试锚拖曳到这里</span></div>
</body>
<script>
function $(dom) {return document.querySelectorAll(dom);
}$("#oSource")[0].ondragstart = function(event)
{event.dataTransfer.setData("text", event.target.getAttribute("data-name"));
}$("#oTarget")[0].ondragover = function(event)
{event.preventDefault();var sAnchor = event.dataTransfer.getData("text");console.log(sAnchor + " being dragged");
}$("#oTarget")[0].ondrop = function(event)
{event.preventDefault();var sAnchor = event.dataTransfer.getData("text");console.log(sAnchor + " dropped");$("#oTarget")[0].innerText = sAnchor;
}
</script>
</html>

待解释。

————————————————————————

update 2016/5/15 18:42
关于上述问题

上面那个示例可以在dragover中通过dataTransfer.getData()获取数据的原因是我直接打开文档运行了，如果放到wamp中一样获取不到数据。

引用：

HTML 5.1

W3C Working Draft, 3 May 2016

dataTransfer.getData()在dragover,dragenter,dragleave中无法获取数据的问题相关推荐

如何获取大端中的数据_【软件】ProE中各种获取数据方式的区别
更多精彩,请点击上方蓝字关注我们! 软件 ProE中各种获取数据方式的区别输入特征:输入特征是通过数据共享功能从外部文件输入几何的,文件输入以后,会转换成proe软件能够识别的几何,称为一个特征发布 ...
bootstraptable中responsehandle获取数据缺失_Python中的向量化字符串操作
Python的一个使用优势是它在处理和操作字符串数据方面相对容易. 在此基础上Pandas提供了一套全面的向量化字符串操作(vectorized string operation),这些操作成为处理现 ...
ajax从数据库中查询获取数据,如何使用ajax从数据库获取正确的数据
在我的项目中,我使用ajax从数据库中获取数据.我测试数据内容,我选择alert(valData)成功函数.但不幸的是,没有从 ajax返回.我测试过如何使用ajax从数据库获取正确的数据 selec ...
实时数据采集与处理：如何从各种数据源中快速获取数据？
作者:禅与计算机程序设计艺术随着互联网.大数据.物联网等新兴技术的发展,越来越多的人们开始关注和使用基于这些技术的应用服务.其中,实时数据采集与处理(Real-Time Data Collectio ...
html中websocket获取数据,如何使用websocket从数据库中获取数据来刷新视图
在标准的Web交互中,客户端(即您的Web浏览器)向您的服务器发送请求.您的服务器收到请求,然后发送回您的浏览器中显示的信息,然后终止连接. WebSockets是一种在客户端和服务器之间创建持久,双 ...
swiper中ajax获取数据不能滑动问题
近期移动项目中,做的类似今日头条栏目效果,swiper中内容通过ajax获取,不能侧滑,暂时了解到的解决办法: 1.在ajax请求成功后绑定swiper容器: 2.在swiper中添加内容变化后初始 ...
python中request获取数据,Python 中request数据的获取
@app.route('/users', methods=['GET', 'POST']) def users(): print "Hello, World!" print(req ...
JS中使用${}获取数据
使用` ` 键获取${}中的数据,不是单引号.(注:使用英文,左上角的~键) $("button").click(function(){$.get(`/try/ajax/demo ...
jQuery中ajax获取数据赋值给页面
//html代码 <a href="javascript:void(0)" class="cityname" id="{$rr[code]}&q ...
mvc ajax异常,使用SpringMVC的controller中能获取数据但直接跳到异常页面,使用Ajax。...
Controller代码 import java.util.Date; import org.springframework.stereotype.Controller; import org.spr ...

dataTransfer.getData()在dragover,dragenter,dragleave中无法获取数据的问题

另一个问题

update 2016/5/15 18:42
关于上述问题

引用：

HTML 5.1

W3C Working Draft, 3 May 2016

dataTransfer.getData()在dragover,dragenter,dragleave中无法获取数据的问题相关推荐

最新文章

热门文章

dataTransfer.getData()在dragover,dragenter,dragleave中无法获取数据的问题

另一个问题

update 2016/5/15 18:42 关于上述问题

引用：

HTML 5.1

W3C Working Draft, 3 May 2016

dataTransfer.getData()在dragover,dragenter,dragleave中无法获取数据的问题相关推荐

最新文章

热门文章

update 2016/5/15 18:42
关于上述问题