jQuery实现的鼠标拖动浮层功能示例【拖动差异等任何标签】

本文实例讲述了框架实现的鼠标拖动浮层功能。分享给大家供大家参考，具体如下：

拖动浮层(div等任何标签)

之前项目做到一个弹出层需要一个拖动功能，上网上查了资料，发现很多方法，但是感觉都很繁琐，有的甚至没看懂。看了几个方法后发现基本上都是使用鼠标放下、鼠标移动和鼠标向上这三个函数来写的，然后就自己写了个移动差异的方法。

先用鼠标放下来判断是否要开启移动，然后通过鼠标移动来获得移动的距离，实现移动；最后通过鼠标向上事件来判断移动结束了。

完整代码实例：

html头元字符集=' utf-8 '/元标题Draw Div/标题脚本src=' http :http://libs。百度。com/jquery/2。0 .3/jquery。量滴js '/script/head dy Div id=' moveDiv ' style=' width :300 px；高度：300 px背景色：红色；position : absolute ' div id=' move bar ' style='底色：绿色；高度：30 px光标：移动；/div /div脚本类型=' text/JavaScript ' var drag job=false；$(文档)。on('mousedown '，' #moveBar '，函数{ DragJob=true});文件。onmousemove=function(e){ if(DragJob){ var e=e | | window。事件；可变高度=$(文档.正文).高度();var width=$(窗口)。宽度();var widthJob=$('#moveDiv ').宽度();var heightJob=$('#moveDiv ').高度();var left=e . client x-width job/2；var top=e.clientY - 18 $(文档)。滚动顶部()；if(top=0顶部高度-高度作业){ $(' # moveDiv ').css('top '，top)；} if(left=0左宽度-宽度作业){ $(' # moveDiv ').css('left '，left)；}返回false } }$(文档)。mouseup(函数{ DragJob=false});/脚本/正文/html这里使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码，可获得如下运行效果：

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery拖拽特效与技巧总结》 、 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。