jq拖拽效果

最新推荐文章于 2021-04-11 12:11:04 发布

li3196672779

最新推荐文章于 2021-04-11 12:11:04 发布

阅读量395

点赞数

分类专栏： JQuery

JQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			width: 150px;
			height: 150px;
			background: red;
			position: absolute;
			left: 0;
			
			top: 0;
		}
	</style>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			
			$('.box').mousedown(function(e){
				var e = e || window.event;
				
				var x = e.pageX; //box里面点击x位置
				var y = e.pageY;  //box里面点击y轴位置
				
				var widt = $(window).width();  //浏览器宽
				var heigh = $(window).height(); //高
				
				var boxW = $('.box').width(); //盒子宽
				var boxH = $('.box').height(); //高
			
				var posX = $('.box').position().left;  //距离左边
				var posY = $('.box').position().top;  //距离上面
				
				$(document).mousemove(function(e){  //鼠标按下未松开
					var e = e || window.event;
					
					var newx = e.pageX; //  鼠标按下x轴
					var newy = e.pageY; //  鼠标按下y轴
					
					var movx = newx - x;  //浏览器dom 鼠标移动的x - 原来在盒子里面鼠标按下的位置
					var movy = newy -y;  //同理
					
					
					var newmovx = posX + movx;  //  偏移的x轴位置 + 上面浏览器dom 鼠标移动的x - 原来在盒子里面鼠标按下的位置
					var newmovy = posY + movy;  //同理
					
					if(posX + movx >= widt - boxW)   //如果 距离左边值+浏览器dom 鼠标移动的x - 原来在盒子里面鼠标按下的位置
					{                                    //大于  浏览器宽-盒子宽
						newmovx = widt - boxW;   // 需要移动的 位置 =  浏览器宽-盒子宽
					}
					
					if(posX + movx <= 0)  //如果 偏移x轴位置 +  浏览器dom 鼠标移动的x - 原来在盒子里面鼠标按下的位置
					{
						newmovx = 0;  //就代表 鼠标移出去了， 给0
					}
					
					if(posY + movy >= heigh - boxH)
					{
						newmovy = heigh - boxH;
					}
					
					if(posY + movy <= 0)
					{
						newmovy = 0;
					}
					
					
					
					$('.box').css({'left':newmovx+'px','top': newmovy+'px'}) //set
				})
			})
			
			$('.box').mouseup(function(){ 
				$(document).off('mousemove');
			})  //当点击在盒子上的鼠标松开的 时候 清除事件
			//---------------------------------------------------------------
		})
	</script>
</head>
<body>
	<div class="box">
		
	</div>
</body>
</html>