做拖拽相关效果时，想在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中一样获取不到数据。



dataTransfer.getData()在dragover,dragenter,dragleave中无法获取数据的问题的更多相关文章

  1. Java之XML操作：从XML中直接获取数据

    本文介绍如何将数据记录在XML文件中,然后通过DOM4J直接从XML中读取到数据. 依赖包: <dependency> <groupId>dom4j</groupId&g ...

  2. MySQL 中随机获取数据

    由于需要大概研究了一下MYSQL的随机抽取实现方法. 目前采用的方法: SELECT * FROM tablename ORDER BY RAND() LIMIT 实现原理: 通过ORDER BY R ...

  3. react+dva 全局model中异步获取数据state在组件中取不到值

    先上结论,不是取不到,是写法有问题. 全文分4部分,1是问题描述,2是一开始的解决想法(错误做法),3是问题产生原因的思考,4是正常解决方法.只想看结论直接跳4 1.问题描述 接触react dva一 ...

  4. 使用SQL语句从数据库一个表中随机获取数据

    -- 随机获取 10 条数据 SQL Server:SELECT TOP 10 * FROM T_USER ORDER BY NEWID() ORACLE:SELECT * FROM (SELECT ...

  5. ASP.NET中动态获取数据使用Highcharts图表控件【Copy By Internet】

    具体实现的效果如图:

  6. 哪种方式更适合在React中获取数据？

    作者:Dmitri Pavlutin 译者:小维FE 原文:dmitripavlutin.com 国外文章,笔者采用意译的方式,以保证文章的可读性. 当执行像数据获取这样的I/O操作时,你必须发起获取 ...

  7. HTML5--拖动02-dragstart、drag、dragenter、dragover、dragleave、drop、dragend属性

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. ASP.NET MVC5中View-Controller间数据的传递

    使用ASP.NET MVC做开发时,经常需要在页面(View)和控制器(Controller)之间传递数据,那么都有哪些数据传递的方式呢? 本文对于View向Controller中传值共列举了以下几种 ...

  9. gridview中后台获取某列的值

    下面的gridview中,获取某行某列的值(非模板页),如图所示 <asp:GridView AutoGenerateColumns="false" CssClass=&qu ...

随机推荐

  1. Matlab中如何将（自定义）函数作为参数传递给另一个函数

    假如我们编写了一个积分通用程序,想使它更具有通用性,那么可以把被积函数也作为一个参数.在c/c++中,可以使用函数指针来实现上边的功能,在matlab中如何实现呢?使用函数句柄--这时类似于函数指针的 ...

  2. [Unity3D插件]2dtoolkit系列二 动画精灵的创建以及背景图的无限滚动

    经过昨天2dtoolkit系列教程一的推出,感觉对新手还有有一定的启发作用,引导学习使用unity 2dToolKit插件的使用过程,今天继续系列二——动画精灵的创建,以及背景图的无限循环滚动,在群里 ...

  3. 一个json字符串

    { "area": [{ "flag": "Y", "ishot": "N", "lag& ...

  4. android AsyncTask介绍（转）

    android AsyncTask介绍 AsyncTask和Handler对比 1 ) AsyncTask实现的原理,和适用的优缺点 AsyncTask,是android提供的轻量级的异步类,可以直接 ...

  5. mac上创建MySQL的基本步骤

    首先得安装环境与MySQL的软件 安装环境的软件在这里我用的是:jdk-8u111-macosx-x64.dmg MySQL:mysql-5.7.16-osx10.11-x86_64.dmg 安装好了 ...

  6. MFC中afx_msg是什么，afx_msg void function()是什么意思

    应用程序框架产生的消息映射函数例如:afx_msg void OnBnClickedButton1(); 其中 afx_msg为消息标志,它向系统声明:有消息映射到函数实现体:而在map宏定义中,就有 ...

  7. Practical JAVA（三）关于final

    Practice 2,3 final 作用于by value变量时,一旦赋值不可更改 作用于by reference变量时,一旦不能指向第二个对象,但是可以改变对象的内容.比如不可以第二次=new x ...

  8. DataTables - 问题集

    1.增加额外搜索条件 var reqData = {}; var extraSearch = []; var oTable = $('table selector').dataTable({ 'aja ...

  9. C#多线程编程总结

    VS2008.C#3.0在WinForm开发中,我们通常不希望当窗体上点了某个按钮执行某个业务的时候,窗体就被卡死了,直到该业务执行完毕后才缓过来.一个最直接的方法便是使用多线程.多线程编程的方式在W ...

  10. 02 CSS/javaScript

    CSS(Cascading Style Sheets)是层叠样式表用来设置网页的显示效果.可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能.简单一句话:C ...