HTML 5 新增的拖放API
郝东
172
HTML 5 新增的拖放API
1.启动拖动
在HTML 5 中，＜img.. .／＞元素默认就是可拖动的；而<a…/＞元素只要设置了href 属性，它默认也是可拖动的。
对千普通元素而言，如果希望把它变成可拖动的，开发者只要把该元素的draggable 属性设为true 即可。但仅仅设置该元素的draggable 属性还不够，因为仅仅设置了draggable="true"只表示该元素可拖动，但拖动时并未携带数据，因此用户看不到拖动效果。
为了让拖动操作能携带数据，应该为被拖动元素的ondragstart 事件指定监听器，在该监听器中让拖动操作可以携带数据。
2.接受“放”
拖动图片、拖动<div…/＞时，被拖到“目的地”并不接受被拖动的元素——这是因为当被拖动元素被“拖过“document 对象时， document 对象默认阻止了拖动事件，而其他HTML 组件也是位千document 对象内的，因此它们也不能接受“放”。
为了让document 可以接受“放“，应该为document 的ondragover 事件指定监听器，在监听器中取消document 对拖动事件的默认行为。
3.DataTransfer 对象
拖放触发的拖放事件有一个dataTransfer 属性，该属性值是一个DataTransfer 对象，该对象包含如下属性和方法。
► dataTransfer.dropEffect: 设置或返回拖放目标上允许发生的拖放行为。如果此处设置的拖放行为不在effectAllowed 属性设置的多种拖放行为之内，拖放操作将会失败。该属性值只允许为“none” 、“copy” 、“link”和“move” 四个值之一。
► dataTransfer. effectAllmyed: 设置或返回被拖动元素允许发生的拖动行为。该属性值可设置为“none” 、“copy” 、“copylink” 、“copyMove” 、”link” 、”linkMove” 、“move” 、"all”和“uninitialized” 。
► data Transfer.items: 该属性返回DataT ransferltems 对象，该对象代表了拖动数据。
► dataTransfer.setDraglmage(element, x, y) ：设置拖放操作的自定义图标。其中element 设置自定义图表， x 设置图标与鼠标在水平方向的距离； y 设置图标与鼠标在垂直方向的距离。
► data Transfer.add Element(element) ：添加自定义图标。
► data Transfer.types: 该属性返回一个DOMString List 对象，该对象包括了存入data Transfer 中数据的所有类型。
► data T ransfer.getData(format) ：获取DataTransfer 对象中format 格式的数据。
► dataTransfer.setData(format, data) ：向DataTransfer 对象中设置format 格式的数据。其中format 代表数据格式， data 代表数据。
► data Transfer. clearData([format]）：清除DataTransfer 对象中format 格式的数据。
4.拖放行为
通过设置DataTransfer 对象的effectAllowed 、dropEffect 两个属性可以控制拖放行为。effectAllowed 用千控制被拖动元素的拖动行为，因此通常建议在ondragstart 事件监听器中设置DataTransfer 对象的effectAll owed 属性；而dropEffect 则控制被“放”入的目标组件的行为，因此通常建议在ondragover 事件监听器中设置DataTransfer 对象的dropEffect 属性。
前面已经介绍过一条总规则：如果dropEffect 设置的拖放行为不在effectAllowed 属性设置的多个拖放行为之内，拖放操作将会失败。
5.改变拖放图标
通过调用DataTransfer 对象的setDraglmage 还可以改变拖放图标。