jquery写拖拽

最新推荐文章于 2024-02-05 11:29:35 发布

csq2804106929

最新推荐文章于 2024-02-05 11:29:35 发布

阅读量300

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/csq2804106929/article/details/49787135

版权

jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<span style="font-size:12px;">详情参考:</span><span style="color: rgb(51, 51, 51); font-family: tahoma, arial, 宋体; line-height: 45px; white-space: nowrap; background-color: rgb(238, 238, 241);"><span style="font-size:10px;">妙味课堂原创JavaScript视频教程——事件详解3</span></span>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery-2.1.4.js"></script>
	<script>
	$(function(){
		var disX=0;
		var disY=0;
		$('div').mousedown(function(ev){
			disX=ev.pageX-$(this).offset().left;
			disY=ev.pageY-$(this).offset().top;
			$(document).mousemove(function(ev){
				var l=ev.pageX-disX;
				var t=ev.pageY-disY;
				if(l<0)
				{
					l=0;
				}else if (l>$(window).width()-$('div').get(0).offsetWidth) {
					l=$(window).width()-$('div').get(0).offsetWidth;
				};
				if (t<0) {
					t=0;
				}else if(t>$(window).height()-$('div').get(0).offsetHeight){
					t=$(window).height()-$('div').get(0).offsetHeight;
				}
				$('div').css('left',l);
				$('div').css('top',t);
			})
			$(document).mouseup(function(){
				$(document).off();
			})
			return false;//阻止默认事件和默认行为
		})
	});
	</script>
	<style>
	.box{
		width: 100px;
		height: 100px;
		background: red;
		position: absolute;
	}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

csq2804106929

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery写拖拽

详情参考:妙味课堂原创JavaScript视频教程——事件详解3 Document $(function(){ var disX=0; var disY=0; $('div').mousedown(function(ev){ disX=ev.pageX-$(this).offset().left; disY=ev.pageY-$(this).offset
复制链接

扫一扫

专栏目录