在HTML5中,提供了直接支持拖放操作的API,能更加轻松的实现拖放操作以及处理拖放事件。
下面给出的源代码是通过拖放操作显示文本:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>通过拖放显示欢迎语</title>
<script type="text/javascript">
function init()
{
var source=document.getElementById("dragme");
var dest=document.getElementById("text");
source.addEventListener("dragstart",function(ev)
{
var dt=ev.dataTransfer; //向dataTransfer对象追加数据
dt.effectAllowed='all';
dt.setData("text/plain","I love you!");
},false);
dest.addEventListener("dragend",function(ev) //拖放结束
{
ev.preventDefault(); //拒绝被拖放
},false);
dest.addEventListener("drop",function(ev)
{
var dt=ev.dataTransfer; //从dataTransfer对象中取得数据
var text=dt.getData("text/plain");
dest.textContent+=text; //添加文本
ev.preventDefault(); //拒绝被拖放,设置这个属性是为了能够接收其他的控件
ev.stopPropagation(); //停止事件传播
},false);
document.οndragοver=function(e){e.preventDefault();};
document.οndrοp=function(e){e.preventDefault();};
}
</script>
</head>
<body οnlοad="init()">
<h1>拖放欢迎语</h1>
<div id="dragme" draggable="true" style="width:200px;border:1px solid gray;">
请拖放
</div>
<div id="text" style="width:200px; height:200px; border:1px solid gray">
</div>
</body>
</html>