一个jquery拖拽效果的实例

来源：互联网发布：移动gprs是几g网络编辑：程序博客网时间：2024/06/01 08:38

<!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>