HTML5学习之一:Drag and Drop(原创)

以前我们想实现元素的拖放效果,基本上都是使用DOM事件模型中的MousedownMouseoveMouseup等事件,来监听鼠标的动作,不停地获取鼠标的坐标来修改元素的位置。这导致代码比较多,而且性能上也不是很好(不停的修改元素的位置导致页面的reflow)现在有了html5原生的Drag &Drop事件(DnD),方便了许多,而且性能也有了提高。

1.如何使对象能够被拖动

所有HTML元素都具有draggable属性,要想让对象能够被拖动,只要设置对象的draggable属性为truedraggable属性具有三个值,分别是true,表示能够被拖动;false表示不能够被拖动;auto视浏览器而定。

在大多数的浏览器里面,图片,超链接(<a>),文本都是可以被拖动的。

HTML5学习之一:Drag and Drop(原创)

1.1拖放事件(拖:Drag,放:Drop

事件

描述

目标

dragstart

开始拖对象时触发

被拖动对象

dragenter

当对象第一次被拖动到目标对象上时触发,同时表示该目标对象允许‘放’这动作

目标对象

dragover

当对象拖动到目标对象时触发

当前目标对象

dragleave

在拖动过程中,当被拖动对象离开目标对象时触发

先前目标对象

drag

每次当对象被拖动时就会触发

被拖动对象

drop

当发生“放”这动作时触发

当前目标对象

dragend

在拖放过程,松开鼠标时触发

被拖动对象

注:在拖动过程中,鼠标事件比如mouseover是不会被触发的;

 

完成一次成功页面内元素拖拽的行为事件过程应该是: dragstart > dragenter > dragover > drop > dragend。有了这些事件,通过javascript就可以处理整个拖拽过程。

1.2开始拖动(dragstartdragenterdragoverdragleave

dragstart:

HTML5学习之一:Drag and Drop(原创)

注:effectAllowed属性用于初始化dragenterdragover事件中的dropEffect属性

dragenter

 HTML5学习之一:Drag and Drop(原创)

dragover

 HTML5学习之一:Drag and Drop(原创)

注:

1)为了阻止浏览器的默认行为,比如拖动某链接(<a>)标签时,防止跳转到链接的地址,所以这边需要调用e.preventDefault();另外一个针对IE,需要在dragover事件中添加return false

2)将设置对象的class属性放在dragenter事件中处理,是因为dragenter事件只会在对象第一次被拖动到目标对象上触发。如果放在dragover事件中的话,就会不停触发设置class的事件,导致浏览器不断的重绘。

1.3完成拖动(dropdragend

drop

HTML5学习之一:Drag and Drop(原创)

注:这边需要阻止事件在DOM节点中冒泡,所以需要调用e.stopPropagation()

dragend

HTML5学习之一:Drag and Drop(原创)

2.DATATRANSFER对象

DnD API中我觉得最帅的一个属性,就是这个DataTransfer了。它可以用来在拖放过程中传递数据。拖放过程中可以存储的数据类型有两种:一种是字符串(Plain Unicode string),另一种是文件(File);

拖放数据的存储模式:

Read/write modedragstart事件中,可以添加拖放数据项

Read-only modedrop事件中,拖放数据项只能被读,不能添加数据项

Protected mode其他的drag事件,只能枚举拖放数据项

DataTransfer接口:

HTML5学习之一:Drag and Drop(原创)

注:

1dropeffect,如果该属性值不是effectallowed中规定的属性,该drop动作就会失败;

2setDataImage(),设置拖动过程中跟随鼠标的图片,用来替代默认的元素;

HTML5学习之一:Drag and Drop(原创)

3addElement,添加一起跟随拖拽的元素,如果你想让某个元素跟随被拖拽元素一同被拖拽,则使用此方法;

4setDatagetData

HTML5学习之一:Drag and Drop(原创)

5)结合File Api,可以获得本地拖放文件。FileReader专门用于读取文件,根据 W3C 的定义,FileReader 接口“提供一些读取文件的方法与一个包含读取结果的事件模型”。

 

欢迎转载,转载时请注明出处:http://www.cnblogs.com/wpfpizicai/

你可能感兴趣的:(html5)