练习笔记:使用jQuery实现H5拖放(drag 和 drop)功能

最新推荐文章于 2024-04-29 11:29:56 发布

雨田Larry

最新推荐文章于 2024-04-29 11:29:56 发布

阅读量8.8k

点赞数 5

分类专栏： HTML jQuery 文章标签： jquery H5

本文链接：https://blog.csdn.net/leiliz/article/details/54926764

版权

HTML 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

jQuery

4 篇文章 0 订阅

订阅专栏

遇到问题1:
在js里面可直接e.dataTransfer.setData("obj_add",e.target.id);

使用jQuery绑定事件时,需e.originalEvent.dataTransfer.setData("obj_add",e.target.id);

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			.backpack {width:400px;height:200px;border:1px solid #aaaaaa;}
			#div3 {width:200px;height:200px;border:1px solid #aaaaaa;}
			.item{
				display:inline-block;
				background-color: antiquewhite;
				height: 25px;
				width: 50px;
			}
		</style>
		<meta charset="UTF-8">
		<title></title>		
	</head>
	<body>
		<div id="a" class="item" draggable="true">武器</div>
		<div id="b" class="item" draggable="true">衣服</div>
		<div id="c" class="item" draggable="true">鞋子</div>
		<div id="d" class="item" draggable="true">法宝</div>
		<div class="backpack" id="div1"><h4>人物属性</h4></div>
		<div class="backpack" id="div2"><h4>背包</h4></div><br />
		<div id="div3"><h5>上面两个框的内容拖到此处可删除</h5></div>
		
		<script src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
		jQuery(function($) {			
			//拖放开始:获取id放入dataTransfer
			$(".item").on("dragstart",function(e){
				e.originalEvent.dataTransfer.setData("obj_add",e.target.id);
			});
			
			//允许放入
			$("#div1").on("dragover",function(e){
				e.originalEvent.preventDefault();
			})
			
			//允许放入
			$("#div2").on("dragover",function(e){
				e.originalEvent.preventDefault();
			})
			
			//允许放入
			$("#div3").on("dragover",function(e){
				e.originalEvent.preventDefault();
			})
			
			
			//放下事件
			$("#div1").on("drop",function(e){
				e.originalEvent.preventDefault;
				var id = e.originalEvent.dataTransfer.getData("obj_add");
				$(this).append($("#"+id));
				//给新加入的元素添加拖放事件
				$("#"+id).on("dragstart",function(e){
					e.originalEvent.dataTransfer.setData("obj_remove",e.target.id);
				});
			})
			
			//放下事件
			$("#div2").on("drop",function(e){
				e.originalEvent.preventDefault;
				var id = e.originalEvent.dataTransfer.getData("obj_add");
				$(this).append($("#"+id));
				//给新加入的元素添加拖放事件
				$("#"+id).on("dragstart",function(e){
					e.originalEvent.dataTransfer.setData("obj_remove",e.target.id);
				});
			})
			
			//放下事件 用来删除
			$("#div3").on("drop",function(e){
				e.originalEvent.preventDefault;				
				var r = e.originalEvent.dataTransfer.getData("obj_remove");
				$("#"+r).remove();

			}) ;
		});

		</script>
	</body>
</html>

雨田Larry

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
练习笔记:使用jQuery实现H5拖放(drag 和 drop)功能

遇到问题1:在js里面可直接e.dataTransfer.setData("obj_add",e.target.id); 使用jQuery绑定事件时,需e.originalEvent.dataTransfer.setData("obj_add",e.target.id); .backpack {width:400px;height:200px;border:1px s
复制链接

扫一扫

专栏目录