用jQuery添加dragstart,dragover和drop事件,实现拖拽效果

本文介绍了一个使用HTML、CSS和jQuery实现的拖拽图片功能。通过拖拽事件,可以在两个不同的div区域之间移动图片,展示了基本的拖放操作,包括dragstart、dragover和drop事件的绑定及处理。

一、效果图

二、代码 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>拖拽事件</title>
		<style type="text/css">
			div{
				width:400px;
				height:300px;
				border:1px solid black;
			}
		</style>
		<script src="js/jquery-3.4.0.min.js" type="text/javascript">			
		</script>			    
	</head>
	<body>
		<div id="box1">
			<img id='img' src="img/JG1.jpg"/ width='200' draggable="true">
		</div>
		<div id="box2">
			
		</div>
		
		<script type="text/javascript">
			$(document).ready(function(){
				var $box1=$('#box1')
				var $box2=$('#box2')
				var $img=$('img')
				
		        //给我们要拖动的图片绑定dragstart事件,把图片的id保存在dataTransfer里面。
		        //这里要注意,原生js的dataTransfer就是event的属性,而jQuery的dataTransfer在originalEvent里面
				$img.bind('dragstart',function(e){
					var data=e.originalEvent.dataTransfer
					data.setData('text/plain',$(this).attr('id'))  
					
				})
				//给box2添加dragover事件,取消默认行为,允许往上拖图片。
				//preventDefault也在originalEvent里面。
				$box2.bind('dragover',function(e){
					e.originalEvent.preventDefault()
				})
				//给box2添加drop事件,从dataTransfer里面取出图片的id。
				//往box2插入图片的时候要注意,我们是会用id来获取节点,而id本身是不带#号的,#需要自己拼接上。
				$box2.bind('drop',function(e){
					var text=e.originalEvent.dataTransfer.getData('text/plain')
					$(this).append($('#'+text))
				})
				
				//下面对box1的操作跟box2一样,这样就能再把图片拖回去
				$box1.bind('dragover',function(e){
					e.originalEvent.preventDefault()
				})
				
				$box1.bind('drop',function(e){
					var text=e.originalEvent.dataTransfer.getData('text/plain')
					$(this).append($('#'+text))
				})
			})
		</script>
			
	</body>
	
</html>

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值