jq拖拽--可用于拼图小游戏

最新推荐文章于 2023-03-10 16:51:17 发布

刘能耐

最新推荐文章于 2023-03-10 16:51:17 发布

阅读量300

点赞数 1

文章标签： javascript html jquery css

本文链接：https://blog.csdn.net/weixin_44683100/article/details/106579705

版权

jq拖拽--可用于拼图小游戏

<html>
	<head>
	<style>
			div{width:100px;height: 100px; background-color:red ; position: absolute;}
</style>
	<script type="text/javascript" src="../lib/jquery-3.4.1.js" ></script>   
	<script>
			$(function(){
				
				$("div ").mousedown(function(ev){
					var offsetX=ev.pageX-$(this).offset().left;			
					//page,指鼠标光标在页面中的位置
					//offset().left , 指相对于文档的左边缘（往往体现为文档的左边缘距离浏览器的左边缘）的距离
					var offsetY=ev.pageY-$(this).offset().top;			
					
					//this是当前按下的div
					var _this=this;
					$(document).mousemove(function(ev){
						$(_this).css({
							left:ev.pageX-offsetX,
							top:ev.pageY-offsetY
						})
					})
				})
				$(document).mouseup(function(){			//当鼠标抬起时，将document身上mousemove全部给取消掉
					$(document).off("mousemove");
					
					
				})
			})
		</script>   
	</head>
	<body>
		<div id="div1">