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.实例：选择图形
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1,#div2,#div3,#div4 { border:3px dashed #ccc; float: left; margin: 10px; min-height: 100px; padding: 10px; width: 220px; } </style> <script type="text/javascript"> //关闭默认处理 function allowDrop(e) { e.preventDefault(); } //拖放操作 function drag(e) { //设置传递的对象 // e.dataTransfer.setData("Text", e.target.id); e.dataTransfer.setData("Text",e.target.id); //设置自定义拖动图标 var dragIcon = document.createElement('img'); dragIcon.src = 'img/dragimg.png'; var dt = e.dataTransfer; dt.setDragImage(dragIcon, -10, -10); } function drop(ev) { ev.preventDefault(); //获取传递过来的对象 var data=ev.dataTransfer.getData("Text"); //将新对象加入到该对象中 ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrog="drop(event)" ondragover="allowDrop(event)"> <h2>选择颜色</h2> <img src="img/bg_01.png" draggable="true" ondragstart="drag(event)" id="drag1" /> <img src="img/bg_02.png" draggable="true" ondragstart="drag(event)" id="drag2" /> <img src="img/bg_03.png" draggable="true" ondragstart="drag(event)" id="drag3" /> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> <h2>红色</h2> </div> <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"> <h2>绿色</h2> </div> <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"> <h2>蓝色</h2> </div> </body> </html>
