一个jquery拖拽效果的实例

最新推荐文章于 2022-09-13 11:06:10 发布

dreamboycx

最新推荐文章于 2022-09-13 11:06:10 发布

阅读量836

点赞数

分类专栏：前端设计

本文链接：https://blog.csdn.net/dreamboycx/article/details/10101235

版权

前端设计专栏收录该内容

121 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一款简单的jQuery拖拽div层效果</title>
<style type="text/css">
#drag{width:400px;height:300px;background:url();cursor:move;position:absolute;top:100px;left:100px;border:solid 1px #ccc;}
h2{color:#000;background: none repeat scroll 0 0 rgba(16, 90, 31, 0.7);color:#000;height:40px;line-height:40px;margin:0;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
        $(function(){
            /*--------------拖曳效果----------------
            *原理：标记拖曳状态dragging ,坐标位置iX, iY
            *         mousedown:fn(){dragging = true, 记录起始坐标位置，设置鼠标捕获}
            *         mouseover:fn(){判断如果dragging = true, 则当前坐标位置 - 记录起始坐标位置，绝对定位的元素获得差值}
            *         mouseup:fn(){dragging = false, 释放鼠标捕获，防止冒泡}
            */
            var dragging = false;
            var iX, iY;
            $("#drag").mousedown(function(e) {
                dragging = true;
                iX = e.clientX - this.offsetLeft;
                iY = e.clientY - this.offsetTop;
                //this.setCapture && this.setCapture();
                return false;
            });
            document.onmousemove = function(e) {
                if (dragging) {
                var e = e || window.event;
                var oX = e.clientX - iX;
                var oY = e.clientY - iY;
                $("#drag").css({"left":oX + "px", "top":oY + "px"});
                return false;
                }
            };
            $(document).mouseup(function(e) {
                dragging = false;
                //$("#drag")[0].releaseCapture();
                //e.cancelBubble = true;
            })
        })
    </script>
</head>
<body>
    <div id="drag">
     <h2>来拖动我啊</h2>
    </div>
</body>
</html>

缺点：整个DIV移动，如果DIV块内没有东西要输入还可以，如果要输入东西即使在DIV里加上input文本框内也无法输入

改进了一下：

DIV内可以输入文本框的，同时移动图标只出现DIV最顶端，这样才能够更实用。。。。。

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一款简单的jQuery拖拽div层效果</title>
<style type="text/css">
#drag{width:400px;height:300px;background:url();position:absolute;top:100px;left:100px;border:solid 1px #ccc;}
h2{cursor:move;color:#000;background: none repeat scroll 0 0 rgba(16, 90, 31, 0.7);color:#000;height:40px;line-height:40px;margin:0;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
        $(function(){
            /*--------------拖曳效果----------------
            *原理：标记拖曳状态dragging ,坐标位置iX, iY
            *         mousedown:fn(){dragging = true, 记录起始坐标位置，设置鼠标捕获}
            *         mouseover:fn(){判断如果dragging = true, 则当前坐标位置 - 记录起始坐标位置，绝对定位的元素获得差值}
            *         mouseup:fn(){dragging = false, 释放鼠标捕获，防止冒泡}
            */
            var dragging = false;
            var iX, iY;
            $("#drag h2").mousedown(function(e) {
                dragging = true;
                iX = e.clientX - $("#drag").offset().left;
                iY = e.clientY - $("#drag").offset().top;
                //this.setCapture && this.setCapture();
                return false;
            });
            $(document).mousemove(function(e) {
                if (dragging) {
                var e = e || window.event;
                var oX = e.clientX - iX;
                var oY = e.clientY - iY;
                $("#drag").css({"left":oX + "px", "top":oY + "px"});
                return false;
                }
            });
            $(document).mouseup(function(e) {
                dragging = false;
                //$("#drag")[0].releaseCapture();
                //e.cancelBubble = true;
            })
        })
    </script>
</head>
<body>
    <div id="drag">
     <h2>来拖动我啊</h2>
     <input type="text" name="inp" >
    </div>
    
    <div id="postion"></div>
</body>
</html>

进一步改进，实际页面效果一般如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>鼠标拖拽</title>
	<style type="text/css">  
	#drag{width:400px;border:solid 1px #ccc;}  
	h2{cursor:move;color:#000;background: none repeat scroll 0 0 rgba(16, 90, 31, 0.7);color:#000;height:40px;line-height:40px;margin:0;}  
	</style> 
	<script src="jquery-1.6.js" type="text/javascript"></script>
	<script>
		$(function(){
			var dragging=false;
			var iX,iY;

			/**
			 * 鼠标按下事件
			 * @param  {[type]} e [description]
			 * @return {[type]}   [description]
			 */
			$("#drag h2").mousedown(function(e){
				dragging=true;
				e = e || window.event;
				iX = e.clientX-$("#drag").offset().left;
				iY = e.clientY-$("#drag").offset().top;
			});


			/**
			 * 鼠标移动事件
			 * @param  {[type]} e [description]
			 * @return {[type]}   [description]
			 */
			$(document).mousemove(function(e){
				e = e || window.event;
				if(dragging){
					oX = e.clientX - iX;
					oY = e.clientY - iY;
					$("#drag").css({"left":oX + "px", "top":oY + "px"});
				}
			});


			/**
			 * 鼠标松手事件
			 * @return {[type]} [description]
			 */
			$(document).mouseup(function(){
				dragging = false;
			});

			/**
			 * 提交报名
			 */
			 $("#but").click(function(){
			 	height = window.screen.height;
			 	width = window.screen.width;
			 	hei = (height/2)-200;
			 	wid = (width/2)-200;
			 	$("#drag").show().css({"position":"absolute","left":+wid+"px","top":+hei+"px"});
			 });
		});
	</script>
</head>
<body>
	<div id="drag" style="display: none">
		<h2>来拖我啊</h2>
		姓名：<input type="text" name="username"/><br>
		手机号:<input type="text" name="tel" value=""><br>
		家庭住址：<input type="text" name="address" /><br>
		<input type="submit" name="sub" id="sub" value="提交报名" />

	</div>
	<button id="but">
		我要报名
	</button>
</body>
</html>

dreamboycx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个jquery拖拽效果的实例

一款简单的jQuery拖拽div层效果丨芯晴网页特效丨CsrCode.Cn#drag{width:400px;height:300px;background:url();cursor:move;position:absolute;top:100px;left:100px;border:solid 1px #ccc;}h2{color:#000;background: none repeat
复制链接

扫一扫

专栏目录