HTML5 ??? ? ??
??? ? ??
??? ? ??? ??? ?? ??? ?? ??? ????? ???? ?????.
HTML5??? ??? ? ??? ??? ???? ?? ??? ????? ? ??? ? ????.
1. HTML5 ??? ? ??
??? ? ??(Drag and drop)? HTML5 ??? ?????.
2. ??? ??
ondragstart: ???? ???? ???? ???(???) ??? ?????
3. ??? ??? ??
setData(): ???? ???? ??? ??? ?? ?????.
4. ??
ondragover: ???? ???? ???? ??? ??? ?????.
5. ??
ondrop: ??? ? ??? ???? ???? drop ???? ?????.
??:
ondrop ???? ??? ??(?? ??)?? ????:
ondragstart: ???? ?? ???? ??? ? ????
ondrag: ??? ???? ? ????
ondragend: ???? ??? ? ???? ?? ???
??? ??? ? ????? ???
ondragenter: ???? ???? ??? ?? ????? ??? ??? ? ? ???? ??????.
ondragover: ???? ??? ?? ?? ????? ?? ? ? ???? ???? ?? ??? ???? ? ??????.
ondragleave: ? ???? ???? ????? ??? ?? ????? ??? ??? ? ??????.
ondrop: ? ???? ??? ???? ?? ??? ??? ?? ? ??????.
??? ? ?? ??:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>drop</title>
<style>
.box{
width: 400px;
height: 400px;
}
#box1{
float: left;
background-color: #CCCCCC;
}
#box2{
float: left;
background-color: aqua;
}
</style>
<script> var box1Div, msgDiv, img1, box2Dib;
window.onload = function () {
box1Div = document.getElementById("box1");
msgDiv = document.getElementById("msg");
img1 = document.getElementById("img1");
box2Div = document.getElementById("box2");
box1Div.ondragover = function (e) {
e.preventDefault();
}
box2Div.ondragover = function (e) {
e.preventDefault();
}
img1.ondragstart = function (e) {
e.dataTransfer.setData("imgId","img1");
}
box1Div.ondrop = dropImghandler;
box2Div.ondrop = dropImghandler;
function dropImghandler(e) {
//創(chuàng)建節(jié)點
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="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="http://img4.imgtn.bdimg.com/it/u=4240085321,3307603809&fm=21&gp=0.jpg" alt="">
<div id="msg"></div>
</body>
</html>
