1.两个div中进行图片来回拖拽切换，直接上代码:
样式css
<style>
#div1, #div2 {
width: 400px;
height: 300px;
border: 1px solid green;
}
#div2 {
border: 1px solid red;
}
</style>
DOM
<div id="div1" ondragover="onDragOver(event)" ondrop="onDrop(event)"> </div> <br> <div id="div2" ondragover="onDragOver(event)" ondrop="onBackDrop(event)"> <img id="img1" src="../images/gif.gif" draggable="true" ondragstart="onDragStart(event)"/> </div>
JS
<script>
function onDragStart(e) {
e.dataTransfer.setData("text", e.target.id)
}
function onDragOver(e) {
e.preventDefault();
}
function onDrop(e) {
e.preventDefault();
e.target.appendChild(document.getElementById(e.dataTransfer.getData("text")));
}
function onBackDrop(e) {
e.preventDefault();
e.target.appendChild(document.getElementById(e.dataTransfer.getData("text")));
}
</script>
2.注意几点：
a.函数名不能跟事件名一样，否则拖拽的时候会报错：如图
b. onDragOver等事件名在dom中带的入参event不能改成e，否则拖拽也会报错，如图：
onBackDrop事件 可改成 onDrop，
以上测试只在谷歌41版本上测试。
原文：https://www.cnblogs.com/ouycx/p/9388018.html