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


Posted in Javascript onFebruary 19, 2016

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

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

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

废话少说,先看效果:

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

全部代码:

<!DOCTYPE HTML> 
<html> 
<head> 
<title>easydrag实现可拖动的DIV弹出框</title> 
<style> 
/* 重置浏览器默认样式 */ 
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;padding:0;border:0;} 
ul,ol,li{list-style:none;} 
input,button{margin:0;font-size:12px;vertical-align:middle;} 
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; color:#333; margin:0 auto; } 
table{border-collapse:collapse;border-spacing:0;} 
a{ color:#333; text-decoration:none;} 
a:hover{ text-decoration:none;} 
.wrap{ width:960px; margin:20px auto;} 
.box{ display:none; background:#fff; border:1px solid #ccc; position:absolute;} 
#popbox{ width:550px;height:320px;overflow:hidden;} 
#handler{ width:98%; height:30px; line-height:30px; overflow:hidden; color:#fff; border-bottom:1px solid #ccc; background:#ccc; padding-left:2%; float:left;} 
.btn{ display:block; width:90px; height:28px; border:1px solid #ccc; line-height:28px; text-align:center; margin-right:20px; float:left; display:inline; margin-right:15px; cursor:pointer;} 
.close{ display:block; background:url(images/close.gif) no-repeat; width:13px; height:13px; float:right; text-indent:-999em; cursor:pointer; display:inline; margin:8px 12px 0 0;} 
.head i{ float:left; font-style:normal;} 
.content{ width:100%; float:left;} 
.content img{width:100%;} 
</style> 
<!-- 使用百度的jquery在线cdn --> 
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 
<!-- easydrag.js没有找到在线的cdn,大家可以自行下载 --> 
<script type="text/javascript" src="js/easydrag.js"></script> 
<script language="javascript"> 
$(function(){ 
//btn绑定click事件 
$('.btn').click(function(){ 
//设置弹出框居中 
$('#popbox').css({ 
left: ($(window).width() - $('#popbox').outerWidth())/2, 
top: ($(window).height() - $('#popbox').outerHeight())/2 + $(document).scrollTop() 
}); 
$('#popbox').easydrag(); 
//淡入已隐藏的div 
$('#popbox').fadeIn(); 
$('#popbox').setHandler('handler'); 
$('.close').click(function(){ 
//淡出效果来隐藏弹出的div 
$('#popbox').fadeOut(); 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<div class="wrap"> 
<b class="btn">打开弹出框</b> 
<div id="popbox" class="box"> 
<div class="head" id="handler"><b class="close">关闭</b><i>点击标题位置进行拖动</i></div> 
<div class="content"><a href="http://blog.csdn.net/xmtblog/"><img src="images/img03.jpg" /></a></div> 
</div> 
</div> 
</body> 
</html>

以上内容是小编给大家介绍的使用jQuery的easydrag插件实现可拖动的DIV弹出框,希望对大家有所帮助!

Javascript 相关文章推荐
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
js下将金额数字每三位一逗号分隔
Feb 19 #Javascript
javascript下使用Promise封装FileReader
Feb 19 #Javascript
javascript每日必学之循环
Feb 19 #Javascript
jQuery实现简单的DIV拖动效果
Feb 19 #Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 #Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 #Javascript
基于JavaScript实现弹出框效果
Feb 19 #Javascript
You might like
php 字符转义 注意事项
2009/05/27 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
php树型类实例
2014/12/05 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
php链式操作的实现方式分析
2019/08/12 PHP
基于jQuery实现下拉框
2014/11/24 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
深入浅出学习python装饰器
2017/09/29 Python
python中web框架的自定义创建
2019/09/08 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
python如何快速拼接字符串
2020/10/28 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
大学生水文观测实习自我鉴定
2013/09/29 职场文书
前厅部经理岗位职责范文
2014/02/04 职场文书
2014年情人节活动方案
2014/02/16 职场文书
工作失职检讨书500字
2014/10/17 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL