jQuery实现的简单拖动层示例

本文实例讲述了jQuery实现的简单拖动层。分享给大家供大家参考，具体如下：

运行效果图如下：

完整代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/script src=' http : jquery-1。4 .2 .量滴js ' language=' JAVAScript '/脚本标题无标题文档/title/head body div id=' a ' style=' width :300 px；高度：300 px背景色： # 069;位置：绝对'按下鼠标即可拖动/div div id=' b '/div/body script language=' JavaScript ' $(function(){//alert(' aaaaa ')；var x；var y；var topvar左侧；var clixvar cliyvar pdvar fx .var fy$('#a ').鼠标向下(函数(f){ PD=真；if(！f){ f=窗口。事件；} fx=f.clientXfy=f.clientYtop=$(这个)。偏移量()。顶部；左=$(这个)。偏移量()。向左；});$('#a ').鼠标移动(函数(e){ if(！e){ e=窗口。事件；} clix=e . clientxcliy=e . clientyif(PD==true){ $(this).css({'top':top (cliy-fy)，' left ' : left(clix-FX)})；} $('#b ').文本(e . client x " e . client y "；});$('#a ').鼠标上移(function(){ PD=false；});})/脚本/html更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery常用插件及用法总结》 、 《jQuery扩展技巧总结》 、 《jQuery切换特效与技巧总结》 、 《jQuery遍历算法与技巧总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

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