JQuery实现DIV拖动效果示例

最新推荐文章于 2024-05-13 02:03:23 发布

袁忠

最新推荐文章于 2024-05-13 02:03:23 发布

阅读量432

点赞数

分类专栏： JS JQUERY

本文链接：https://blog.csdn.net/u010168409/article/details/41390825

版权

JS JQUERY 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>laotou</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="description" content="">
		<script type="text/javascript" src="f:/java/js/jquery.js"> </script>
		<!--css,js-->
		<style type="text/css">
			*{margin:0;padding:0;}
			.box_1{width:460px;height:250px;border:2px solid #666;position:absolute;}
			.top{width:460px;height:40px;background:#666;cursor:move;}
			.top a{display:block;color:#fff;font-size:14px;font-family:"微软雅黑";text-decoration:none;}
			.top #t_title{float:left;padding-left:20px;line-height:40px;}
			.top #t_title:hover{cursor:default;}
			.top #t_btn{width:24px;float:right;margin-right:20px;border:1px solid #ccc;border-radius:24px;line-height:24px;text-align:center;margin-top:5px;}
			.top #t_btn:hover{color:#666;background:#ccc;}
		</style>

	</head>
<body>
	<div class="box_1">
		<div class="top">
			<a href="javascript:void(0);" id="t_title">消息提示框</a>
			<a href="javascript:void(0);" id="t_btn">X</a>
		</div>
		<p id="x"></p>
		<p id="y"></p>
	</div>


<script type="text/javascript"> 
	$(function(){
		var isFalg = false;
		$(".box_1").mousedown(function(e){
			var me = $(this);
			var width = $(".box_1").width();
			var height = $(".box_1").height();

			var top = me.offset().top;
			var left =me.offset().left;

			var x = e.clientX;  /* pageX,pageY : 是获取页面坐标*/
			var y = e.clientY;  /* screenX,screenY : 获取屏幕分辨坐标 */
			//$("#x").html(x +"---"+ y);

			isFalg = true;
			//绑定元素的拖动事件，不要绑定在元素本身上面。而是绑定在document上；
			$(document).mousemove(function(e){
				if(isFalg){
					var xx = e.clientX; 
					var yy = e.clientY; 
					var t = yy + top - y;
					var l = xx + left - x
					//$("#y").html(xx +"---"+ yy);
					me.css({left:l,top:t});
				}
			}).mouseup(function(){
				isFalg = false;
			});
			
		});
	});

	

</script>