HTML5学习笔记之拖放
对于HTML5,拖放是一个标准的一部分,任何元素都是可以被拖放的。
HTML5的拖放功能是通过JS来实现的,在通过对标签元素的获取,在JS中通过对需要拖放的位置调用函数ondragover,禁止浏览器的默认事件,设置被拖放元素的id,调用函数实现拖放。
<span style="white-space: pre;"></span><pre name="code" class="html">//demo01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖放</title>
<style>
.box{
width: 400px;
height: 400px;
}
#div01{
float: left;
background-color: aquamarine;
}
#div02 {
float: left;
background-color: deeppink;
}
</style>
<script src="Demo01.js"></script>
</head>
<body>
<div id="div01" class="box"></div>
<div id="div02" class="box"></div>
<img src="img01.jpg" id="img01">
<div id="msg" style="clear: both;"></div>
</body>
</html>
相关JS代码:
<pre name="code" class="javascript">//demo01.js
var div01,msgDiv,img01;
window.onload = function(){
div01 = document.getElementById("div01");
div02 = document.getElementById("div02");
msgDiv = document.getElementById("msg");
img01 = document.getElementById("img01");
div01.ondragover = function(e){
e.preventDefault();
}
div02.ondragover = function(e){
e.preventDefault();
}
img01.ondragstart = function(e){
e.dataTransfer.setData("imgId","img01");
}
div01.ondrop = dropImghandler;
div02.ondrop = dropImghandler;
}
function dropImghandler(e){
showObj(e);
e.preventDefault();
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;
}
浏览器执行结果: