HTML中的一些拖放行为

通过拖放实现添加、删除

DataTransfer对象

包含的属性和方法

dataTransfer.dropEffect:设置或返回拖放目标上允许发生的拖放行为。如果此处设置的拖放行为不在effectAllowed属性设置的多种拖放行为之内，拖放操作将会失败。该属性值只允许为none、copy、link和move四个值之一。

dataTransfer.effectAllowed:设置或返回被拖动元素允许发生的拖放行为。该属性值可设置为none、copy、copyLink、copyMove、link、linkMove、move、all和uninitialized。

dataTransfer.items:该属性返回DataTransferltems对象，代表拖动数据。

dataTransfer.setDraglmage(element,x,y):设置拖放操作的自定义图标。

dataTransfer.addElement(element)：添加自定义图标。

dataTransfer.types：该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型。

dataTransfer.getData(format)：获取DataTransfer对象中format格式的数据。

dataTransfer.setData(format,data)：向DataTransfer对象中设置format格式的数据。format代表数据格式，data代表数据。

dataTransfer.clearData([format])：清除DataTransfer对象中format格式的数据。

可以将喜欢的水果放入下面的方框内，如果喜欢，可以放到右边的盘子内。

拖放行为

通过设置DataTransfer对象的effectAllowed、dropEffect两个属性可以控制拖放行为。effectAllowed用于控制被拖动元素的拖动行为，dropEffect来控制被“放”入得目标组件的行为。

如果effectAllowed设为none，则不允许拖动该元素。

如果dropEffect设置为none，则被拖动的元素不能“放”到本元素中。

如果effectAllowed设置为all或不设置，则dropEffect可设置为任何属性值，而且将会遵守dropEffect指定的拖放行为。

如果effectAllowed指定了特定的拖放行为，那么dropEffect指定的属性值必须是effectAllowed指定的多个属性值的子集。

上面代码通过调用DataTransfer对象的setDragImage可以改变拖放过程中图标。