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版本上测试。
HTML5 拖拽
原文地址：https://www.cnblogs.com/ouycx/p/9388018.html