概念：
虽然HTML5之前已经可以使用mousedown、mousemove、mouseup来实现拖放操作，但是只支持在浏览器内部的拖放，而在HTML5中，已经支持在浏览器与其他应用程序之间的数据互相拖动，同时也大大简化了有关拖放方面的代码。
实现拖放的步骤：
（1）将想要拖放的对象元素的dr0aggable属性设为true。另外img元素与a元素（必须指定href）默认允许拖放。
（2）编写与拖放有关的事件处理代码。
应用
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖放示例</title>
<script type="text/javascript">
function init()
{
var source = document.getElementById("dragme");
var dest = document.getElementById("text");
//(1)拖放开始
source.addEventListener("dragstart",function(ev)
{
//向dataTransfer对象追加数据
var dt = ev.dataTransfer;
dt.effectAllowed = 'all';
//(2)拖放元素为dt.setData("text/plain",this.id);
dt.setData("text/plain","你好");
},false);
//(3)dragend:拖放结束
dest.addEventListener("dragend",function(ev)
{
//不执行默认操作
ev.preventDefault();
},false);
//(4)drop:被拖放
dest.addEventListener("drop",function(ev)
{
//从DataTransfer对象那里取得数据
var dt = ev.dataTransfer;
var text = dt.getData("text/plain");
dest.textContent += text;
//(5)不执行默认操作
ev.preventDefault();
//停止事件传播
ev.stopPropagation();
},false);
}
//(6)设置页面属性,不执行页面操作
document.ondragover = function(e){e.preventDefault();};
document.ondrop = function(e){e.preventDefault();};
</script>
</head>
<body onload="init()">
<h1>简单拖放示例</h1>
<div id="dragme" draggable="true" style=" 200px;border: 1px solid gray;">
请拖放
</div>
<div id ="text" style=" 200px;height: 200px;border: 1px solid gray;">
</div>
</body>
</html>
效果
注意事项：
1.起初效果显示不出来，是function（ev）这个函数后面多加了一个“ ）”符号，以及document写成了docnment
2 在HBuilder软件中编写html代码，可以发现字体是黑色是代表有误，要格外留意！