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 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
js jquery数组介绍
Jul 15 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
vue实现移动端input上传视频、音频
Aug 18 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动态实现表格跨行跨列实现代码
2012/11/06 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
eclipse php wamp配置教程
2016/06/30 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
Python合并字符串的3种方法
2015/05/21 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
Python实现随机爬山算法
2021/01/29 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
大学生违纪检讨书300字
2014/10/25 职场文书
2015元旦感言
2015/12/09 职场文书
Python基础详解之邮件处理
2021/04/28 Python