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 相关文章推荐
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
jquery图形密码实现方法
Mar 11 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
layui 给数据表格加序号的方法
Aug 20 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
Vue快速实现通用表单验证的方法
Feb 24 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
php下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
ES6中数组array新增方法实例总结
2017/11/07 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
朴素贝叶斯算法的python实现方法
2014/11/18 Python
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
python三大神器之fabric使用教程
2019/06/10 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
苹果音乐订阅:Apple Music
2018/08/02 全球购物
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
《春雨》教学反思
2014/04/24 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
股东大会通知
2015/04/24 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技