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>
