将元素图片放入div盒子内
1、首先设置元素为可拖放：在img标签内加入draggable=”true”.
<img draggable="true">
2、设置元素的拖动：在img标签中用ondragstart属性调用一个函数drag(ev)，这个函数中用dataTransfer.setData()方法设置了被拖数据的数据类型和值.
<img ondragstart=”drag(event)”>
function drag(ev){
ev.dataTansfer.setData(“Text”,ev.target.id)//数据类型是Text，值是可拖动元素的id（“drag1”）。
}
3、放到何处-ondragover
在被放置的div中用ondragover来规定设置的允许设置，因为默认无法将数据/元素放置到其他元素中，如果需要允许放置，必须阻止对元素默认的处理方式。
这时候用ondragover来调用一个函数alloeDrop(ev)，函数内部规定了event.preventDefault()方法用来阻止元素的默认处理方式
<div ondragover=”allowDrop(event)”></div>
function allowDrop（ev）{
ev.prentDefault();
}
4、下面就是放置了-ondrop
在被放置的div中设置ondrop=”drop（event）”调用drop（ev）函数，函数中规定了放置的过程。
<div ondrop="drop(event)"></div>
Function drop(ev){
ev.preventDefault();//用来避免浏览器对数据的默认处理
- var data=ev.dataTransfer.getData（”Text”）;// 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
ev.target.appendChild (document.getElementById(data));// 被拖数据是被拖元素的 id ("drag1")把被拖元素追加到放置元素（目标元素）中
}