使用拖放API实现页面内的拖放功能，将图片拖至垃圾箱将从页面上删除该图片，效果如图所示。
1 回答
一只萌萌小番薯
TA贡献1795条经验 获得超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){ //拖拽前触发
ev.dataTransfer.setData('text',this.innerHTML); //存储一个键值对: value值必须是字符串
targetLi = this;
};
aLi[i].ondragend = function(){ //拖拽结束触发
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){ //进入目标、离开目标之间，连续触发
ev.preventDefault(); //阻止默认事件：元素就可以释放了
};
oDiv.ondrop = function(ev){ //释放鼠标的时候触发
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 关注
- 770 浏览
添加回答
举报
0/150
提交
取消