使用jQuery的easydrag插件实现可拖动的差异弹出框

轻松拖动是一个用来实现页面元素拖拉的jQuery插件。

在没遇到easydrag插件之前，想实现一个弹出框并不是一件轻而易举的事情！

人们常说没有不劳而获的事情，但在编码的世界中却不是这样。更多的开源框架方面了我们，也毒害了我们！

废话少说，先看效果：

全部代码：

！文档类型标题标题轻松拖动实现可拖动的差异弹出框/标题样式/*重置浏览器默认样式*/body、h1、h2、h3、h4、h5、h6、p、ul、ol、li、form、img、dl、dt、dd、table、th、td、blockquote、fieldset、div、strong、label、em { margin:0划水：0;边界：ol、Li {列表式：无；}输入，按钮{ margin :0 font-size :12 px；垂直对齐：毫米；}正文{ font-size :12 px字体系列Helvetica阿里亚尔：无衬线；color: # 333margin:0 auto }表格{边框-折叠：折叠；边框间距：0;} a { color: # 333文本装饰：无；} a :悬停{ text-decoration : none} .包装{ width :960 pxmargin :20 px汽车；} .框{ display:none背景# fffborder:1px固体# ccc位置：绝对；} # popbox { width:550px高度：320 px飞越：隐藏；} #处理程序{宽度：98%；高度：30 px线高：30 px飞越：隐藏；color : # fffborder-bottom :1 px实心# ccc背景# ccc左填充：2%;float:left}。btn {显示：块宽度：90 px高度：28 pxborder:1px固体# ccc行高：28 px文本对齐：居中；右边距：20 pxfloat : leftisplay : inline右边距：15 px光标：指针指针；} .关闭{ display : block background : URL(图像/关闭。gif)不重复；宽度：13 px高度：13px右浮动：文本缩进：-999 em；光标：指针指针；display : inlinemargin 33608 px 12px 0 { 0 }。头部I { float : left font-style : normal；} .内容{宽度：100%；float:left}。内容img { width :100%；} /style！-使用百度的jquery在线cdn-脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/脚本！- easydrag.js没有找到在线的cdn，大家可以自行下载-脚本类型=' text/JavaScript ' src=' http : js/easy drag。js /脚本脚本语言=' JavaScript ' $(函数(){//BTN绑定点击事件$('.BTN ' .单击(函数(){ //设置弹出框居中$('#popbox ').css({ left: ($(window)).width() - $('#popbox ').outwidth())/2，top: ($(window).height() - $('#popbox ').outhealth())/2 $(文档)。滚动顶部()})；$('#popbox ').轻松拖动()；//淡入已隐藏的div $('#popbox ').fadeIn()；$('#popbox ').setHandler(' handler ')；$('.关闭')。单击(函数(){ //淡出效果来隐藏弹出的div $('#popbox ').淡出()；});});});/script/head body div class=' wrap ' b class=' BTN '打开弹出框div id=' pop box ' class=' box ' div class=' head ' id=' handler ' b class=' close '关闭我点击标题位置进行拖动/I/div class=' content ' a href=' http://blog。csdn。net/xmtblog/' img src=' http : images/img 03。jpg '/a/div/div/body/html以上内容是小编给大家介绍的使用jQuery的easydrag插件实现可拖动的差异弹出框，希望对大家有所帮助！