浅谈jQuery实现拖拽

最新推荐文章于 2022-10-11 12:40:54 发布

筱葭

最新推荐文章于 2022-10-11 12:40:54 发布

阅读量600

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/53033080

版权

jQuery 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
	<head>
		<style type="text/css">
			#box{
				position:fixed;
				left:100px;
				top:100px;
				background-color:red;
				width:300px;
				height:200px;
			}
			#out{
				height:2000px;
			}
		</style>
		<script src="js/jquery-1.8.2.min.js"></script>
		<script>
			$(document).ready(function(){
				var drafting=false; 
				var offX,offY,mouseX,mouseY,winX,winY,x,y;
				$("#box").mousedown(function(event){
					event.stopPropagation();
					drafting=true;
				});
				$(document).mousemove(function(event){
					event.stopPropagation();
					var e=event||window.event;
					mouseX=e.pageX||e.clientX+$(document).scrollLeft();
					mouseY=e.pageY||e.clientY+$(document).scrollTop();
					winX=$("#box").offset().left-$(document).scrollLeft();
					winY=$("#box").offset().top-$(document).scrollTop();
					if(drafting==false){
						offX=mouseX-winX;
						offY=mouseY-winY;
					}
					x=mouseX-offX;
					y=mouseY-offY;
					$("#box").css({'left':x,'top':y});
				});
				$(document).mouseup(function(event){
					event.stopPropagation();
					drafting=false;
				});	
			});
		</script>
	</head>
	<body>
		<div id="box"></div>
		<div id="out"></div>
	</body>
</html>

筱葭

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈jQuery实现拖拽

#box{ position:fixed; left:100px; top:100px; background-color:red; width:300px; height:200px; } #out{ height:2000px; } $(document).ready(function(){
复制链接

扫一扫