jQuery实现可拖动的浮动层完整代码


Posted in Javascript onMay 27, 2013

以下是使用jQuery实现可拖动的浮动层的完整代码,复制保存到html文件就可以体验效果。也可以访问以下网址体验效果:http://www.keleyi.com/keleyi/phtml/dragdiv.htm

光标移动到层上,按住鼠标就可以拖动层。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery实现可拖动的浮动层(版本2) - 柯乐义</title> 
<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.8.2.min.js"></script> 
<style type="text/css"> 
.box{ position:absolute; top:200px; left:400px; width:200px; height:200px; background:#8a9bca; cursor:move;} 
</style> 
<script type="text/javascript"> 
$(document).ready(function (e) { 
$(".box").mousedown(function (e) { 
iDiffX = e.pageX - $(this).offset().left; 
iDiffY = e.pageY - $(this).offset().top; 
$(document).mousemove(function (e) { 
$(".box").css({ "left": (e.pageX - iDiffX), "top": (e.pageY - iDiffY) }); 
}); 
}); 
$(".box").mouseup(function () { 
$(document).unbind("mousemove"); 
}); 
}); 
</script> 
</head> 
<body style="width:2000px"> 
<div>欢迎光临!</div> 
<div class="box" id="Drigging">光标移动到层上,<br />按住鼠标就可以拖动该层。<br /><br /><br /><br />柯乐义</div> 
<div>www.keleyi.com</div> 
</body> 
</html>
Javascript 相关文章推荐
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
Jquery 插件开发笔记整理
Jan 17 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
JavaScript常用内置对象用法分析
Jul 09 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 #Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 #Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 #Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 #Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 #Javascript
使用jquery实现div的tab切换实例代码
May 27 #Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 #Javascript
You might like
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
利用PHP实现短域名互转
2013/07/05 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
JScript的条件编译
2007/05/29 Javascript
js调用flash的效果代码
2008/04/26 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
vue 插件的方法代码详解
2019/06/06 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
Python操作SQLite简明教程
2014/07/10 Python
python连接mysql实例分享
2016/10/09 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
车间班长岗位职责
2013/11/30 职场文书
运动会入场词60字
2014/02/15 职场文书
霸王洗发水广告词
2014/03/14 职场文书
《从现在开始》教学反思
2014/04/15 职场文书
城南旧事读书笔记
2015/06/29 职场文书
新闻稿标题
2015/07/18 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
Python图片验证码降噪和8邻域降噪
2021/08/30 Python