通過??
draggable=true??設(shè)置是否可以被拖動（ie這個老表不支持）
- dragstart:拖拽開始時在被拖拽元素上觸發(fā)此事件,監(jiān)聽器需要設(shè)置拖拽所需數(shù)據(jù),從操作系統(tǒng)拖拽文件到瀏覽器時不觸發(fā)此事件.
- ragenter:拖拽鼠標(biāo)進入元素時在該元素上觸發(fā),用于給拖放元素設(shè)置視覺反饋,如高亮
- dragover:拖拽時鼠標(biāo)在目標(biāo)元素上移動時觸發(fā).監(jiān)聽器通過阻止瀏覽器默認行為設(shè)置元素為可拖放元素.
-dragleave:拖拽時鼠標(biāo)移出目標(biāo)元素時在目標(biāo)元素上觸發(fā).此時監(jiān)聽器可以取消掉前面設(shè)置的視覺效果. - drag:拖拽期間在被拖拽元素上連續(xù)觸發(fā)
- drop:鼠標(biāo)在拖放目標(biāo)上釋放時,在拖放目標(biāo)上觸發(fā).此時監(jiān)聽器需要收集數(shù)據(jù)并且執(zhí)行所需操作.如果是從操作系統(tǒng)拖放文件到瀏覽器,需要取消瀏覽器默認行為.
- dragend:鼠標(biāo)在拖放目標(biāo)上釋放時,在拖拽元素上觸發(fā).將元素從瀏覽器拖放到操作系統(tǒng)時不會觸發(fā)此事件.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<title>Scc</title>
<style>
div{
width:600px;
height:600px;
border:1px solid black;
padding-top:20px;
padding-left:20px;
}
#d1{
float:left;
}
#d2{
float:right;
}
</style>
</head>
<body>
<div id="d1">
<img id="img" src="Koala.jpg">
</div>
<div id="d2"></div>
</body>
<script>
var d2=document.getElementById("d2");
var img=document.getElementById("img");
img.ondragstart=function(event){
var data=this.src;
event.dataTransfer.setData("text",data);
}
d2.ondragover=function(event){
event.preventDefault();
}
d2.ondrop=function(event){
var src=event.dataTransfer.getData("text");
var i=document.createElement("img");
i.src=src;
d2.appendChild(i);
document.getElementById("d1").removeChild(img);
}
</script>
</html>
注意：dataTransfer是全局共享的，可以通過getData()和setData()設(shè)置、獲取數(shù)據(jù)
