您的位置:首页 - 教程 - HTML5 - 正文
HTML5理论实践与练习之拖放
1、HTML5拖放

拖放(Drag和drop)是HTML5标准的组成部分。

2、拖动开始:

ondragstart:调用了一个函数,drag(event),它规定了被拖动的数据

3、设置拖动数据

setData():设置被拖数据的数据类型和值。

4、放入位置:

ondragover:事件规定在何处放置被拖动的数据。

5、放置:

ondrop:当放置被拖放数据时,会发生drop事件

总结:

在拖动目标上触发事件(源元素):

ondragstart:用户开始拖动元素时触发
ondrag:元素正在拖动时触发
ondragend:用户完成元素拖动后触发

释放目标时触发的事件

ondragenter:当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover:当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave:当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop:在一个拖动过程中,释放鼠标键时触发此事件

一个拖放的示例:
http://hovertree.com/texiao/html5/44/
可以拖动图片放到绿色或者蓝色区域里面。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML5拖放之drop-何问起</title><base target="_blank" />
<style>
.box{
width: 300px;
height: 300px;
}
#hovertreebox{
float: left;
background-color:darkgreen;
}
#keleyibox{
float: left;
background-color:darkblue;
}
#msg{clear:both;}a{color:blue;}
</style>
<script>
var hovertreeboxDiv, msgDiv, hovertreepic1, keleyiboxDiv;

window.onload = function () {
hovertreeboxDiv = document.getElementById("hovertreebox");
msgDiv = document.getElementById("msg");
hovertreepic1 = document.getElementById("hovertreepic");
keleyiboxDiv = document.getElementById("keleyibox");
hovertreeboxDiv.ondragover = function (e) {
e.preventDefault();
}
keleyiboxDiv.ondragover = function (e) {
e.preventDefault();
}

hovertreepic1.ondragstart = function (e) {
e.dataTransfer.setData("imgId", "hovertreepic");
}

hovertreeboxDiv.ondrop = dropImghandler;
keleyiboxDiv.ondrop = dropImghandler;


function dropImghandler(e) {
//创建节点
var img = document.getElementById(e.dataTransfer.getData("imgId"));
e.target.appendChild(img);
}
}

function showObj(obj) {
var s = "";
for(var k in obj){
s+=k+":"+obj[k]+"<br/>";
}
msgDiv.innerHTML = s;
}
</script>
</head>
<body>
<div id="hovertreebox" class="box"></div>
<div id="keleyibox" class="box"></div>
<img id="hovertreepic" src="http://hovertree.com/hvtimg/bjafjd/xusm0re6_l.jpg" alt="">
<div id="msg"></div>
<div style="max-width:960px;">可以拖动图片放到绿色或者蓝色区域里面。<a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/h/bjag/j1jhbtmp.htm">说明</a>
</div>
</body>
</html>

练习题:
http://hovertree.com/tiku/bjag/xuo4y2bk.htm

评论: