本文实例讲述了jQuery实现的鼠标拖动浮层功能。分享给大家供大家参考,具体如下:
<>强拖动浮层(div等任何标签)
之前项目做到一个弹出层需要一个拖动功能,上网上查了资料,发现很多方法,但是感觉都很繁琐,有的甚至没看懂,看了几个方法后发现基本上都是使用mousedown, mousemove和mouseup这三个函数来写的,然后就自己写了个移动div的方法。
先用mousedown来判断是否要开启移动,然后通过mousemove来获得移动的距离,实现移动;最后通过mouseup事件来判断移动结束了。
<强>完整代码实例:
& lt; html>
& lt; head>
& lt;元charset=" utf - 8 "祝辞& lt;/meta>
& lt; title>阻力Div
& lt;脚本src=" http://libs.baidu.com/jquery/2.0.3/jquery.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=癿oveDiv”比;
& lt; div id=" moveBar "祝辞& lt;/div>
& lt;/div>
& lt;脚本type=" text/javascript祝辞
var dragJob=false;
美元(文档)。(“mousedown”、“# moveBar”功能(e) {
dragJob=true;
});
文档。onmousemove=function (e) {
如果(dragJob) {
var e=e | | window.event;
身高=$ var (document.body) .height ();=$ var宽度(窗口).width ();
var widthJob=$ (" # moveDiv”) .width ();
var heightJob=$ (" # moveDiv”) .height ();
var=e。clientX - widthJob/2;
var=e。clientY - 18 + $(文档).scrollTop ();
如果(最高的在=0,,顶级& lt;高度- heightJob) {
$ (" # moveDiv”)。css(“顶级”,最高);
}
如果(左祝辞=0,,左& lt;宽度- widthJob) {
$ (" # moveDiv”)。css(“左”(左);
}
返回错误;
}
}；
美元(文档)。mouseup(函数(e) {
dragJob=false;
});
& lt;/script>
& lt;/body>
& lt;/html>
之前
这里使用:http://tools.jb51.net/code/HtmlJsRun测试上述代码,可获得如下运行效果:
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
