摘自《HTML5应用开发与实践》
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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");
}
//dragstart事件实现拖动
source.addEventListener("dragstart",function(ev)
{
var dt=ev.dataTransfer;//向dataTransfer对象追加数据
dt.effectAllowed='all';
dt.setData("text/plain","欢迎");//拖动元素
},false);
//必须在dragend或dragover事件内调用“event.preventDefault()”方法
dest.addEventListener(
"dragend",function(ev){
ev.preventDefault();
},false
);
//关闭目标元素的默认属性
dest.addEventListener(
"drop",function(ev){
var dt=ev.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>
<!--把draggable属性设为true-->
<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>
357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
