将页面图片拖放到页面某区域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>将页面图片图片拖放到页面某区域</title>
		
		<style>
			.box{
				width: 400px;
				height:400px;
				float: left;
			}
			#box1{
				background-color: #cccccc;
			}
			#box2{
				background-color: pink;
			}
			img{
				width: 40px;
				height:40px;
			}
		</style>
	</head>
	
	<script language="JavaScript" src="js/gf.js"></script>
	<body>
		<div id="box1" class="box"></div><!--目标拖动进入的区域-->
        <div id="box2" class="box"></div><!--目标拖动进入的区域-->                                 
		<img src="img/q.jpg" id="img1"><!--拖动图片-->
		
		<div id="msg" class="box"></div><!--输出,打印拖动图片时各种参数-->
		
		
		
	</body>
</html>

js代码

var box1,box2,msg,img1;



window.οnlοad=function(){
	box1=document.getElementById("box1");
	box2=document.getElementById("box2");
	msg=document.getElementById("msg");
	img1=document.getElementById("img1");
	img2=document.getElementById("img2");
	//box1.οndragenter=function(e){/*ondragenter 事件在拖动的元素或选择的文本**进入**到有效的放置目标时触发,即拖进box1中触发*/
		//getObj(e);
	//}
	img1.οndragstart=function(e){/*ondragstart 事件在用户开始拖动元素或选择的文本时触发。*/
		e.dataTransfer.setData("imgID","img1");/*ondragstart 事件在用户开始拖动元素或选择的文本时触发*/
	}
	box1.οndragοver=function(e){/*ondragover事件在可拖动元素或选取的文本正在拖动**到**放置目标时触发*/
		e.preventDefault();/*阻止冒泡*/
	}
	box1.οndrοp=gg;/*事件在**可拖动元素**或选取的文本放置在目标区域时触发*/
	
	
	box2.οndragοver=function(e){/*ondragover事件在可拖动元素或选取的文本正在拖动**到**放置目标时触发*/
		e.preventDefault();/*阻止冒泡*/
	}
	box2.οndrοp=gg;/*事件在**可拖动元素**或选取的文本放置在目标区域时触发*/
}
function gg(e){
		e.preventDefault();
		getObj(e.dataTransfer);
		var img=document.getElementById(e.dataTransfer.getData("imgID"));
		//box1.appendChild(img);
		e.target.appendChild(img);
	}
function getObj(e){/*打印拖动时的各种参数*/
	var s="";
	for(var k in e){
		s+=k+":"+e[k]+"</br>";
	}
	msg.innerHTML=s;
}


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值