游戏左方用于放置城市的列表其中一项的HTML代码，它包含了提到的三个事件：
&mx6;
事件dragenter及dragover存在的主要目的是为了指示“你可以放在这儿”，它们将通过返回false立刻中止。我们可以通过两个回调函数来提供额外的用户反馈，举例来说：dragenter提示“Youcandrophere!”，dragover提示“Areyousureyougotitright”。为将回调函数中的事件中止，我们使用evt.preventDefault()来代替返回false。其效果相同，都激活了drop事件。
现在我们进入第三步，提取预设的数据并通过ondrop事件执行游戏逻辑。我们再一次将DragEvent作为事件参数传给回调函数drop()，并使用getData()来访问保存在dragstart的ID
vardrop=function(evt){
varid=evt.dataTransfer.getData(1text');varelemO=questions.namealtem(id);varelemA=evt.target;
elemA.setAttribute(lVdata-id",id);
elemA.setAttribute("data-pop",elemO.dataset.pop)；elemA.innerHTML=elemQ.innerHTML;//continuegamelogic
};
通过ID,我们可以使用questions.namedltem(id)来直接访问源对象，将其人口数作为数据属性保存在目标对象中，并以城市名作为标签。变量elemQ及elemA是两个相关li元素的快捷方式。鉴于RemySharp的JavaScript中间件中数据属性仅支持读取，我们将使用常见的elamA.setAttribute("data-id"，id)代替更正规的elemA.dataset.id=id用来保存值。
作为游戏逻辑的一部分，相应的两个按钮在拖曳结束后都将失效并显示反馈——用classList.add()设置CSS样式。因此我们为drop()函数再添加两行代码：
elemO.classList.add('qlnactive');elemA.classList.add('alnactive');CSS样式表中的相关格式为：
.qlnactive{pointer-events:none;color:mAAA;background-color:mEEE;border-color:mAAA;.alnactive{pointer-events:none;background-color:hsl(60%.85%)；^border-color:hsl(60,l00%,40%;；现在，我们要检査所有城市是否都已按人口数排列。正确的答案显示为绿色，错误答案被移除并可被再次摆放。我们用clasSList.add()改变正确答案的颜色，其相关CSS格式如下：
.aCorrect{
background-color:hsl(75,l00%,85%)；
^border-color:hsl(7S,l00%>40%)；
正确回答了所有问题之后，用户将看到祝贺成功的提示。之后，若单击restart按钮，将再次出现4个随机选择的城市以开始新游戏。若用户认为研究人口数量过于沉闷，也可以从下拉菜单中选择其他两种游戏模式：按地理位置从北到南或者从东到西来排列城市。关于游戏的JavaScript及CSS细节：
展示了游戏进行中的截图。你还可以自行扩展游戏，制作一个支持选择城市数量的扩展包，然后将左边的静态列表将变成动态。试一下吧！
回到正题，在这个简单而实用的案例中，还存在一些没提到的细节，例如说，拖曳操作中的另外3个事件：drag、dragend以及dragleave。在拖动过程中将会生成一个drag事件，其响应间隔为ms(±ms)而放置将生成一个dragend事件，第三个事件dragleave在目标对象离开放置区时发生。
DataTransfer同样提供了些有趣的方法和属性---例如setDragImage(element,x，y)方法，用来在拖曳过程中显示自定义图像作为反馈。使用addElexnenKelement)能达到类似效果，但这里我们所拖曳的并非单单一张图片，而是页面上的整个选区。
使用dataTransfer.types，我们可以返回任意格式的DOMStringList值——这个值通过SetData()在startdreg事件中设置。在这个游戏中，这个列表较短，仅包含format参数“text”
和ID,由浏览器自动解析为text/plain。不过DOMStringList的格式并非仅限于MIME类型，规范同样允许和MIME类型无关的格式存在。因此我们得以使用名称更具可读性的数据属性命名format参数。以ID及人口数为例，其代码如下：
evt.dataTransfer.setData(1id',evt.target.id);evt.dataTransfer.setData(1pop',evt.target.dataset.pop);它们可以通过getData(’id')或getData('pop')获取。
若拖曳元素包含了微数据(m/crodata)属性，所有值将自动作为JSON字符串传递，并可通过getDataCapplication/microdata+jsoiV)访问。
f若需在拖曳操作过程中从列表中移除特定格式，我们可以使用clearData(format)方法。若忽略format参数，宁波网站制作认为那么所有现存格式都将被删除。
两个DataTransfer属性effectAllow和dropEffect看名字似乎很有前途，像是跟视觉效果之类的有关。不过具体来说，它们仅仅用于控制目标对象进人放置区时的光标外观。dropEffect的有效关键字为copy、link、move以及none。它们在dragenter事件过程中为光标添加加号、连接符、箭头或什么都不添加(若选择none)。你可以用一个小程序在线测试你浏览器中的效果：http://html5.komplett.cc/code/chap_global/dropEffecten.htmlodropEffect属性值可在拖曳过程中任意改变，但必须始终与之前在effectAllow中指定的值保持一致。除了copy、link、move及none之外，effectAllow还支持组合词，诸如copyLink、copyMove及linkMove，它将这些词中的两个组成部分全部有效化。你还可以通过关键字all允许所有效果。
在进人下一章节之前，让我们来讨论一下拖曳中的安全问题：DataTransfer对象中的数据仅在drop事件中再次对脚本开放。因此，在将文档从A拖曳至B的过程中，恶意文档C无法截取该数据。基于同样的原因，drop事件必须明确由用户的放置行为激活，而非由脚本自动执行。甚至，由脚本控制将窗口到鼠标位置的动作也无法激活dragStart事件，否则敏感数据可能会出人意料的被恶意拖曳至第三方文档中。
浏览器中的拖曳开启了许多新特效的宝库大门。如果你想看看拖曳与画布(Canvas)、本地存储(localStorage)、离线缓存(offlinecache)等HTML5技术相结合的效果，譬如XMLHttpRequest或FileAPl,那就别错过PaulRouget的博客-一个HTML5离线图像编辑及上传程序，以及一段四分钟长的视频。即便其初衷只是为了展示Firefox的一些特性，但他也以一种令人钦佩的态度为我们展示了HTML5能做到些什么。下面我们将进一步深人这个演示的一个方面，并展示如何通过FileAPI在文档中拖曳、并从拖曳的文件中提取数据。
本文由乐华网络编辑，转载请注明出处
宁波网站制作www.leseo.net
