TA貢獻(xiàn)1795條經(jīng)驗(yàn) 獲得超7個(gè)贊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css" >
li{ width:100px; height:70px; margin:20px; list-style:none;background:url(images/paper.png) no-repeat;}
#div1{ width:100px; height:114px; margin:50px; color:#000000; background-image: url("images/ljt.jpg"); }
</style>
<script type="text/javascript">
window.onload = function(){
var aLi = document.getElementsByTagName('li');
var oDiv = document.getElementById('div1');
var iNow = 0;
var targetLi = null;
for(var i=0;i<aLi.length;i++){
aLi[i].ondragstart = function(ev){ //拖拽前觸發(fā)
ev.dataTransfer.setData('text',this.innerHTML); //存儲(chǔ)一個(gè)鍵值對(duì): value值必須是字符串
targetLi = this;
};
aLi[i].ondragend = function(){ //拖拽結(jié)束觸發(fā)
this.style.backgroundImage= 'url("images/ljt1.jpg")';
};
}
oDiv.ondragenter = function(){ //相當(dāng)于onmouseover
this.style.backgroundImage='url("images/ljt2.jpg")';
};
oDiv.ondragleave = function(){ //相當(dāng)于onmouseout
this.style.backgroundImage= 'url("images/ljt3.jpg")';
};
oDiv.ondragover = function(ev){ //進(jìn)入目標(biāo)、離開目標(biāo)之間，連續(xù)觸發(fā)
ev.preventDefault(); //阻止默認(rèn)事件：元素就可以釋放了
};
oDiv.ondrop = function(ev){ //釋放鼠標(biāo)的時(shí)候觸發(fā)
this.style.backgroundImage= 'url("images/ljt3.jpg")';
var oText = ev.dataTransfer.getData('text');
if(targetLi){
targetLi.parentNode.removeChild(targetLi);
this.innerHTML = '刪除的是:'+oText;
}
};
};
</script>
</head>
<body>
<ul>
<li draggable="true">a</li>
<li draggable="true">b</li>
<li draggable="true">c</li>
</ul>
<div id="div1" class="empty"><img src="images/ljt.jpg"/>垃圾箱</div>
</body>
</html>
舉報(bào)