首页 > 代码库 > HTML5 拖放
HTML5 拖放
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
function allowDrop(ev){//ondragover 事件规定在何处放置被拖动的数据, 拖进div移动行为
ev.preventDefault();//元素的默认事件阻止
}
function drag(ev)//拖动行为
{
ev.dataTransfer.setData("Text",ev.target.id);//setData是将指定格式的数据赋值给dataTransfer,ev.target指传入对象
}
function drop(ev)//数据放出行为
{
ev.preventDefault();//元素的默认事件阻止处理
var data=http://www.mamicode.com/ev.dataTransfer.getData("Text");//getData是从dataTransfer或者clipboardData中获取值
ev.target.appendChild(document.getElementById(data));//appendChild是追加,data数据
}
</script>
</head>
<body>
<div id="div1" ondragstart="drag(event)" draggable="true" style="width:200px; height:150px; background:red;"></div>
<!--draggable="true"设置为可以拖动,ondragstart在拖动操作开端运行的脚本。-->
<div id="div2" ondrop="drop(event);" ondragover="allowDrop(event);" style=" width:100%; height:600px; border:1px solid #ffff00;"></div>
</body>
</html>
HTML5 拖放