2.拖动 drag drop allowDrop

参考地址：http://www.runoob.com/html/html5-draganddrop.html

被拖动元素设置 draggable属性为true， οndragstart=drag（event）方法

目标位置元素 设置 οndragοver=allowdrop（event） οndrοp=drop（event）方法

----------------------------------------------------

核心代码：

<div>
<divid="dv"οndragοver="allowDrop(event)"οndrοp="drop(event)"></div>
<imgid="imglogo"src="logo.png"width="100"height="50"draggable="true"οndragstart="drag(event)">
<divid="dv1"οndragοver="allowDrop(event)"οndrοp="drop(event)"></div>
</div>
<styletype="text/css">
#dv{
border:1px solid green;
width:100px;
height:50px;
float:left;
margin-right:10px;
}

#dv1{
border:1px solid blue;
width:100px;
height:50px;
float:left;
}

</style>
<scripttype="text/javascript">
functionallowDrop(ev) {
ev.preventDefault();
}

functiondrag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}

functiondrop(ev) {
ev.preventDefault();
vardata= ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>