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 相关文章推荐
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
vue实现底部菜单功能
Jul 24 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
Python函数参数操作详解
2018/08/03 Python
python学生信息管理系统(完整版)
2020/04/05 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
使用python实现飞机大战游戏
2020/03/23 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
.NET面试问题集
2015/12/08 面试题
可口可乐广告词
2014/03/20 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS