使用拖放API實現(xiàn)頁面內(nèi)的拖放功能，將圖片拖至垃圾箱將從頁面上刪除該圖片，效果如圖所示。
1 回答
一只萌萌小番薯
TA貢獻1795條經(jīng)驗 獲得超7個贊
<!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); //存儲一個鍵值對: value值必須是字符串
targetLi = this;
};
aLi[i].ondragend = function(){ //拖拽結(jié)束觸發(fā)
this.style.backgroundImage= 'url("images/ljt1.jpg")';
};
}
oDiv.ondragenter = function(){ //相當于onmouseover
this.style.backgroundImage='url("images/ljt2.jpg")';
};
oDiv.ondragleave = function(){ //相當于onmouseout
this.style.backgroundImage= 'url("images/ljt3.jpg")';
};
oDiv.ondragover = function(ev){ //進入目標、離開目標之間，連續(xù)觸發(fā)
ev.preventDefault(); //阻止默認事件：元素就可以釋放了
};
oDiv.ondrop = function(ev){ //釋放鼠標的時候觸發(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>
- 1 回答
- 0 關(guān)注
- 887 瀏覽
添加回答
舉報
0/150
提交
取消