1.实现拖放的步骤
①将对象的属性设置为可拖放，即draggable=“true”
②编写有关拖放事件的处理函数。
2.使用dataTransfer对象
dataTransfer对象是事件对象的一个属性，用于从被拖拽元素向放置目标传递字符串格式的数据。因为是事件对象的属性，在拖放事件的事件处理程序中访问dataTranfer对象
①dataTransfer的属性
dropEffect属性：表示拖放操作的视觉效果，该效果必须在用effectAllowed属性指定的允许的视觉效果的范围内，允许指定的值为none、copy、link、move。
effectAllowed属性：用来指定当元素被拖放时所允许的视觉效果，可以指定的值为none、copy、copyLink、copyMove、link、linkMove、move、all.
type属性：存入数据的种类，字符串的伪数组。
②dataTransfer的方法
void clearData方法：清除dataTransfer对象中存放的数据，如果省略参数，则清除全部数据。
void setData方法：向dataTransfer对象内存入数据。
DOMString getData方法：从dataTransfer对象中读取数据。
void setDragImage方法：用img元素设置拖放图标
setData()方法在拖放开始时向dataTransfer对象中存入数据，它用type属性来指定数据MIME类型，而getData()方法在拖动结束时读取dataTransfer对象中的数据。clearData()方法可以用来清除dataTransfer对象内的数据。
3.设定拖放时的视觉效果
dropEffect属性与effectAllowed属性结合设定拖放时的视觉效果。
effectAllowed属性表示当一个元素被拖动时所允许的视觉效果，一般在ondragstart事件中设定，允许设定的值为none、copy、copyLink、copyMove、link、linkMove、move、all。
dropEffect属性表示实际拖放时的视觉效果，一般在ondragover事件中指定，允许设定的值为none、copy、link、move。
dropEffect属性所表示的实际视觉效果必须在effectAllowed属性所表示的允许的视觉效果范围内
规则：
如果effectAllowed属性设定none。则不允许拖放元素。
如果dropEffect属性设定为none，则不允许被拖放到目标元素中。
如果effectAllowed属性设定为all或不设定，则dropEffect属性允许被设定为任何值，并且按指定的视觉效果进行显示。
如果effectAllowed属性设定为具体效果，dropEffect属性也设定了具体视觉效果，则两个具体效果值必须完全相等，否则不允许将被拖放元素拖放到目标元素中。
4.自定义拖放图标
5.实例：选择图形
选择颜色
红色
绿色
蓝色
