//拖放的js通用代码
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
例子：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
background: black;
height:370px;
}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
var a = document.getElementById("drag1");
a.src = "./img/b.png";
}
</script>
</head>
<body>
<div align="center">
<img id="drag2" src="./img/c.jpg" draggable="true" ondragstart="drag(event)" />
<img id="drag3" src="./img/d.jpg" draggable="true" ondragstart="drag(event)"/>
<img id="drag4" src="./img/e.jpg" draggable="true" ondragstart="drag(event)"/>
<img id="drag5" src="./img/f.jpg" draggable="true" ondragstart="drag(event)"/>
</div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" align="center">
<img id="drag1" src="./img/a.png" draggable="true"/>
</div>
</body>
原文：http://www.cnblogs.com/bill-yxh/p/4877515.html