html5 “拖放”

拖放主要是两个部分组成，drag：拖动，drop：放置！既抓取元素后拖到另一个位置！

要实现拖放首先要把被拖动元素设置为可拖动，既：

draggbile="true"

然后要拖动什么：ondragstart()和setData(),要放到何处：ovdragover(),然后代码将获取的元素进行放置：ondrop();

下面是一个拖动实例，(来回拖放)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5 拖动</title>
</head>
<style type="text/css">
.top{width: 700px;height: 160px;border: solid #ccc 1px;margin: 20px 0 0 20px;}
.img1{margin: 20px 0 0 20px;}
</style>
<script type="text/javascript">
/*
*被拖动数据是被拖动元素的ID;
*ondrop():当元素进行放置时发生
*ondragstart()：当元素被拖动时发生
*ondragover():规定在何处放置被拖动元素时发生
*/
function allowDrop(ev){
  //设置拖动到何处触发的事件“ondragover”,避免浏览器对元素的默认处理，（浏览器对元素的默认处理是以链接的方式打开）
  ev.preventDefault();
}
function drag(ev){
  //设置被拖动元素触发事件"ondragstart"和"setData"
  ev.dataTransfer.setData("Text",ev.target.id);//通过setData来设置被拖动数据的数据类型和值;"Text":数据类型，值是被拖动元素的id
}
function drop(ev){
  //设置元素被放置时发生的事件
  ev.preventDefault();//避免浏览器对元素的默认处理
  var data=ev.dataTransfer.getData("Text");//通过dataTransfer.getData()来获取被拖动元素的数据，该方法返回在dataTransfer.setData()中设置为相同类型的数据
  ev.target.appendChild(document.getElementById(data));//把被拖动元素追加到目标元素中
}
</script>
<body>
<div class="top" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="images/img.png" id="drag1" ondragstart="drag(event)" class="img1" draggable="true">
</div>
<div class="top" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>

posted on 2013-09-17 14:58 return false 阅读(845) 评论(1) 收藏举报

刷新页面返回顶部