HTML5 ??? ? ??
??:
??? ? ??? ??? ?? ??? ?? ??? ????? ???? ?????.
HTML5??? ??? ? ??? ??? ???? ?? ??? ????? ? ??? ? ????.
1. "??? ? ?? ???"? ?? ???? ???.
??? ? ?? ???, ? ??? ?? ????? ????. ?? ???
?? ???? ??? ? ???? ???? ????? ?? ???? ?? ???? ??????. ??? ????? dragstart ???, drag ??? ? dragend ???? ????? ??????. ??? ??? ?? ???? ????? dragenter ???, dragover ???, dragleave ?? drop ???? ????? ??????.
2. ?? ??
??? ??? ???? ??
<img draggable="true "> ;
??? ??????? ??? ????? ???? ?????(ondragstart ? setData())
ondragstart ??? ??? ????, drag(event)? ???? ???? ??? ????, dataTransfer.setData()? ??? ? ??? ?????. ??? ???? ??? ?.
?? ???(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
??? ????? ondragover ???? ???? ???? ??? ??? ?????.
????? ???/??? ?? ??? ??? ? ????. ??? ????? ??? ?? ??? ???? ???. ??? ondrop? ondragover ???
event.preventDefault()
? event.preventDefault() ???? ?? ???? ???. ?? PreventDefault()? ?????. ????? ?? ??? ??? ????? dataTransfer.getData("Text") ???? ?? ???? ???? ?????. ????? ???? ??? ??? ??? ?????.
?? ??(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
?? ondragstart? ?? ? ?? ??? ?? ??? ?????. ?? ??? ???? ????? ?? ?? ?? ??? ? ????.
??? ??? ??? ?? ? ??
??? ?? ondragstart ???? in ??? ??? ??? ? ???? ??(????? ???? ?????)
??? ???? ? ondrag ???? ????? ????? ?? ????? ?????(????? ???? ?????). ???? ??)
??? ???? ? ondragenter ???? ??? ??? ?? ???? ????? ????? ?????(????? ?? ???)
??? ???? ? ondragover ???? ??? ??? ?? ??? ????? ? ????? ?????(??? ?? ?????)
??? ???? ? ondragleave ???? ??? ??? ?? ??? ??? ?(??? ?????) ??)
??? ?? ? ?? ????? ??????. ???? ??? ?? ??? ??? ? ????? ?????. (????? ?? ?????.)
??? ?? Ondragend ???? ?? ??? ????? ?????. ??? ??? ?????(??? ???? ?????)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#divDrag{width:200px;height:20px;margin:10px;border:2px solid #111;}
#divArea{width:300px;margin:10px 0;height:300px;border:2px solid #ddd;}
#divTips{width:300px;background-color:#eee;}
</style>
<script type="text/javascript">
function getThisId(id){ return document.getElementById(id);}
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){element.addEventListener(type,handler,false);}
else if(element.attachEvent){element.attachEvent("on"+type,handler);}else{element["on"+type]=handler;}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){element.removeEventListener(type,handler,false);}
else if(element.detachEvent){element.detachEvent("on"+type,handler);}else{element["on"+type]=null;}
},
getEvent:function(event){
return event? event:window.event; /*獲取事件對象*/
},
getTarget:function(event){
return event.target||event.srcElement; /*獲取目標元素*/
},
preventDefault:function(event){ /*取消事件的默認設置*/
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){ /*取消事件冒泡*/
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
};
window.onload = function(){
var Drag = getThisId("divDrag");
var Area = getThisId("divArea");
var objImg = document.createElement("img");
objImg.src = "l.jpg"
EventUtil.addHandler(Drag,"dragstart",function(e){
var objDtf = e.dataTransfer;
objDtf.setData("text",EventUtil.getTarget(e).id);
objDtf.setDragImage(objImg,0,0);
});
EventUtil.addHandler(Area,"dragover",function(e){
EventUtil.preventDefault(e);
EventUtil.stopPropagation(e);
});
EventUtil.addHandler(Area,"drop",function(e){
EventUtil.preventDefault(e);
EventUtil.stopPropagation(e);
var objDtf = e.dataTransfer;
var strHTML = objDtf.getData("text");
var replacediv=getThisId(strHTML).cloneNode(false);
EventUtil.getTarget(e).appendChild(replacediv);
});
}
document.ondragover = function(e){
e.preventDefault();
}
document.ondrop = function(e){
e.preventDefault();
}
</script>
</head>
<body>
<div id="divFrame">
<div class="wPub" id="dddd">
<img id="divDrag" draggable="true" src="http://e.hiphotos.baidu.com/image/pic/item/f3d3572c11dfa9ec2eece15e61d0f703908fc1bd.jpg">
</div>
<div id="divArea"></div>
</div>
</body>
</html>
