JS写的对弹出层的拖动功能,虽然不怎么看的懂,先记着吧,以后慢慢看。
1、JSP代码:
<div id="textDiv" align="center" style="background-color:white;border:1px solid #38533c;z-index:102;position:absolute;top:5px; left:20%;display: none;padding-bottom: 5px;"> <div style="height:32px; background:#3877bc;width:400px;cursor:move;"> <span style=float:left;line-height:32px;color:#fff;font-size:13px;text-indent:5px;>文本内容</span> <span style="line-height:32px;float:right;cursor:pointer;"><img src="images/clo.jpg" height=32 width=32 onclick="closeTextDiv()"/></span> </div> <ul class="ztree" style="overflow:auto" > <textarea id="textContent" cols="61" rows="10"> 要显示的内容 </textarea> </ul> </div>
2、JS调用拖动功能:
document.getElementById("textDiv").getElementsByTagName("div")[0].onmousedown=tuodong;
3、拖动JS代码:
var oBox=null; var bDrag = false; var disX = disY = 0; var ptid=""; function tuodong(event){ oBox=this.parentNode; ptid=this.parentNode.id; var event = event || window.event; bDrag = true; disX = event.clientX - oBox.offsetLeft; disY = event.clientY - oBox.offsetTop; } //拖拽开始 document.onmousemove = function (event) { if (!bDrag) return; if(oBox==null) return false; var event = event || window.event; var iL = event.clientX - disX; var iT = event.clientY - disY; var aX = [oBox.offsetLeft]; var aY = [oBox.offsetTop]; var maxL = document.body.clientWidth - oBox.offsetWidth; var maxT = document.body.clientHeight - oBox.offsetHeight; iL = iL < 0 ? 0 : iL; iL = iL > maxL ? maxL : iL; iT = iT < 0 ? 0 : iT; oBox.style.marginTop = oBox.style.marginLeft = 0; oBox.style.left = iL + "px"; oBox.style.top = iT + "px"; aX.push(iL); aY.push(iT); return false }; //鼠标释放, 结束拖拽 document.onmouseup = function () { bDrag = false; };
4、这个弹出层是在鼠标点击的地方弹出的,定位代码来自:
http://yubosun.akhtm.com/tech/js-position-xiangdui-layer.htm
<style type="text/css"> #thelayer{ width:300px;height:98px;border:#E4F5FD 1px solid;z-index:2;position:absolute;background:#FFFFFF;display:none; } </style> <script> function CPos(x, y) { this.x = x; this.y = y; } function GetObjPos(ATarget) { var target = ATarget; var pos = new CPos(target.offsetLeft, target.offsetTop); var target = target.offsetParent; while (target) { pos.x += target.offsetLeft; pos.y += target.offsetTop; target = target.offsetParent } return pos; } function showlayer(obj) { pos = GetObjPos(obj); l = document.getElementById("thelayer"); l.style.left = pos.x + 40; l.style.top = pos.y + 40; l.style.display="block"; } </script> <div onclick="showlayer(this)">点我</div> <div id="thelayer">浮我</div>
相关推荐
js弹出层可拖动兼容各大浏览器 js弹出层可拖动兼容各大浏览器 js弹出层可拖动兼容各大浏览器 js弹出层可拖动兼容各大浏览器
JS做的隐藏与显示DIV可拖动弹出层实例代码 学习参考
可选属性: 1.autoSize="true" 让div自适应大小 可选值true false 默认false 2.width height弹出框的...7.弹出框是否可拖动 true or false 兼容各种主流浏览器,绝对精美,配置属性后,直接调用js方法即可使用,相当方便.
一款JavaScript开发的弹出层,代码简洁,使用的漂亮弹出层 可拖动的弹出层 遮罩层。
自己基于jQuery封装可拖拽非模态弹出层,采用bootstrap风格,可扩展。 通过$.noModel({/**这里放着各个参数*/}); 具体调用方法在commonality.js中
原生Js浮动弹出层 可拖动 关闭和最小化,用到了几个小图片,分别是标题栏、关闭按钮和最小化按钮,关闭和最小化我给误删了,自己再找个类似的图片覆盖掉吧,弹出层的其它部分都是完全正常的,兼容性也很好,具体效果...
弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容 弹出层 拖动 兼容弹出层 拖动 兼容 弹出层 拖动 ...
可拖动的弹出层提示效果
可以拖拽的弹出层 js实现可以拖拽的弹出层
可拖动图片弹出层插件layer.js
jquery弹出层并可拖动,详细的介绍页面文件里面有,封装好的js,调用接口即可
js弹出框-弹出层-拖拽-兼容 以前自己用的一个小插件。 纯js写的。 以前网上资料下的。 经过修改之后,兼容以及效果比较好用。 简单而精炼。 不需要jquery。
js弹出层特效点击按钮弹出窗口支持鼠标拖动
js打开支持拖动的弹出层
jquery实现可拖动弹出层特效是一款非常实用的功能,基于jquery实现的弹出层效果。
js实现网页上那种点击弹出层的特效代码,支持拖动效果,完整代码下载,这是一个点击文字后弹出一个搜索框的浮动层,基于JS和Div共同实现,用到了几个JavaScript封装类,已为您打包,本弹出层可任意拖动位置,可以...
佛山网站制作www.0757wz.com弹出层效果-js代码打造可以关闭随意在页面拖动的弹出层
js可拖拽最大最小化弹出层窗口是一款窗口可以拖动,可以通过八个方向改变大小,可以最小化、最大化、还原、关闭,支持限制窗口最小宽度高度。
html+js实现可拖动,兼容IE7及以上firefox、谷歌等各版本弹出层并锁屏效果代码,基本功能都实现了。对要求不高的可以使用。
原生js Dialog对话框插件制作19种对话框弹出层拖动