-在HTML5中，任何元素都可以实现拖放。
-Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释：在 Safari 5.1.2 中不支持拖放。
先上代码，依然是w3c中的示例！！！
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
//【3】接下来要写各个函数啦
function allowDrop(ev)
{
ev.preventDefault();
//因为默认情况下是无法在元素中放入其他数据or元素的，所以这里要组织对象事件的默认处理方式（坑爹的是任何版本的IE浏览器event对象不支持该方法...不支持...至于遇到IE怎么办请看**脚注1**）
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
//dataTransfer.setData() 方法设置被拖元素的数据类型和值（此处是元素的id，所以是Text类型，详情可以看**脚注2**，ev.target是指触发事件函数的元素，此处是被拖元素）
}
function drop(ev)
{
ev.preventDefault();
//获取在drag函数中存储的被拖放元素id值，存入data中，用于接下来追加至辣个框框中
var data=ev.dataTransfer.getData("Text");
//【敲黑板】这里的target就是指触发放置函数的目标元素啦（辣个框框）
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>请把 W3School 的图片拖放到矩形中：</p>
<!--【2】充当容器的元素也要设置将元素放置何处(ondragover，此处我觉得可以理解为，在鼠标按住元素拖动过程中触发的函数)和被放入其他元素(ondrop)时会触发的函数-->
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<!--【1】首先，要将拖动的元素设置为可拖动，即draggable="true"
以及开始拖动时要触发的函数ondragstart(event)记得要传入event对象-->
<img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />
</body>
</html>
关于Event对象的详解，参见w3c的解释啦，超级详细~
链接：HTML DOM Event对象详解
另：如果要实现来回拖拽图片，就对两个容器都添加事件函数就好，嗯。
小小总结一下：要么在使用preventDefault函数时判断浏览器的类型，如果是IE浏览器，则使用
window.event.returnValue = false;方法就好；要么就是开发人员自己改写preventDefault函数（在里面加入对浏览器类型的判断语句），这样就可以普遍使用了。我觉得对于要大量使用preventDefault函数的情况下，还是改写比较高效。
btw，今天才知道想要简单地判断一下浏览器是不是IE，用if判断一下document.all就好了，如果不是IE浏览器都会返回false，震惊…