通过draggable属性实现拖曳
浏览器下的拖曳并不新鲜，此功能在9年的IE版本中就已经出现了。以其在IE上的应用为基础，拖曳在5年被列人规范中，并且在当前适用于除Opera之外的所有浏览器。
以游戏中将城市按人口数排序为例，经典拖曳操作的应用包括了下列步骤：
1.选中可被拖动的元素；
2.开始拖曳操作同时在后台判断被拖动的数据
3.决定被拖动元素的可释放位置，4.在拖曳操作结束于有效目标对象的同时提取数据。
我们可以通过全局属性draggable完成第一步。该属性通过draggable=true将相关元素标记为可拖曳元素。有两个元素被默认定义为可拖曳的：img元素及a元素，若其包含href属性，那么我们就可以轻易地将这个图片或链接拖到桌面上保存。若要在避免对这些元素的拖曳，我们可以使用draggable=false。
要将城市列表中的一个条目预设为可拖曳对象，我们首先需要为其添加可拖曳属性并设置为true:
'
Brussels
拖曳操作是达到目的的手段而非目的本身，其作为在于将信息从一个地方传输至另一个地方。至于是哪一条信息则必须在开始拖动操作时便决定，这也就是我们为城市列表的每一个选项都加入一个dragstart事件句柄的原因。该事件句柄调用回调函数startDragO,并将事件对象-也称为DragEvent-作为参数传递：
宁波网站制作认为 ondragstart=MstartDrag(event)">Brussels
DragEvent在拖曳中扮演了重要角色，它的只读属性dataTransfer让我们能够访问drag-and-dropAPI的DataTransfer接口，该接提供拖曳所要用到的所有所需方法及属性。其中一种方法为setData(format,data),它在从A点到B点的拖曳过程中，决定在后台实际被拖动的数据。在本案例中，参数format为“text”，参数data为目标的ID。我们可以根据它在稍后访问原始数据：
vardragStart=function(evt){
evt.dataTransfer.setData('text',evt.target.id);>；为了完成拖曳，我们需要将目标放置位置保持开放。为draggable属性添加一个配对的draggable变量通常都很有用，但在这里却并非如此，这也就是为什么一次成功的放置需要至少三个事件：dragenter、dragover以及drop。奇怪的是，为了能引发第三个最重要的事件，另外两个事件必须中止。
本文由乐华网络编辑，转载请注明出处
宁波网站制作www.leseo.net
