Jquery实现自定义窗口随意的拖拽


Posted in Javascript onMarch 12, 2014

在网页上我们经常看到,当点击一个按钮时,弹出一个自定义窗口,并且可以随意的拖拽,从而改变其位置

使用jquery实现拖拽,则必须要jquery的文件了,实现步骤:

1、引入jquery文件

2、编写js脚本

具体代码:

html代码:

<button id="show">显示</button> 
<div class="win"> 
<div class="wTop"><p style="float:right;margin:5px 5px 0px 0px;color:white" id="hidden">X</p></div> 
<div class="content"></div> 
</div>

css样式:
<style type="text/css"> 
.win{width:500px;height:600px;background:#000000;border-radius:8px;box-shadow:0px 0px 5px 10px;opacity:0.8;position:absolute;left:0;top:0;display:none} 
.win .wTop{height:30px;width:100%;cursor:move} 
.win .content{height:570px;width:100%;border-radius:5px;background:white} 
</style>

js脚本:
<script language="javascript" type="text/javascript"> 
$(function(){ 
//拖拽 
dragAndDrop(); 
//初始化位置 
initPosition(); 
//点击按钮 
clickShowBtn(); 
}); 
//拖拽 
function dragAndDrop(){ 
var _move=false;//移动标记 
var _x,_y;//鼠标离控件左上角的相对位置 
$(".wTop").mousedown(function(e){ 
_move=true; 
_x=e.pageX-parseInt($(".win").css("left")); 
_y=e.pageY-parseInt($(".win").css("top")); 
//$(".wTop").fadeTo(20,0.5);//点击开始拖动并透明显示 
}); 
$(document).mousemove(function(e){ 
if(_move){ 
var x=e.pageX-_x;//移动时鼠标位置计算控件左上角的绝对位置 
var y=e.pageY-_y; 
$(".win").css({top:y,left:x});//控件新位置 
} 
}).mouseup(function(){ 
_move=false; 
//$(".wTop").fadeTo("fast",1);//松开鼠标后停止移动并恢复成不透明 
}); 
} 
//初始化拖拽div的位置 
function initPosition(){ 
//计算初始化位置 
var itop=($(document).height()-$(".win").height())/2; 
var ileft=($(document).width()-$(".win").width())/1.8; 
//设置被拖拽div的位置 
$(".win").css({top:itop,left:ileft}); 
} 
//点击显示按钮 
function clickShowBtn(){ 
$("#show").click(function(){ 
$(".win").show(1000); 
}); $("#hidden").click(function(){ 
$(".win").hide(1000); 
}); 
} 
</script>

引入的js文件
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
Javascript 相关文章推荐
javaScript 读取和设置文档元素的样式属性
Apr 14 Javascript
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
js日历功能对象
Jan 12 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
JS触摸与手势事件详解
May 09 Javascript
使用vue-cli编写vue插件的方法
Feb 26 Javascript
Jquery实现自定义弹窗示例
Mar 12 #Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 #Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 #Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 #Javascript
JavaScript中奇葩的假值示例应用
Mar 11 #Javascript
Javascript加载速度慢的解决方案
Mar 11 #Javascript
js解析json读取List中的实体对象示例
Mar 11 #Javascript
You might like
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python字符串的常用操作方法小结
2016/05/21 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
美国玩具公司:U.S.Toy
2018/05/19 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
医学毕业生自我鉴定
2013/10/30 职场文书
年度考核评语
2014/01/19 职场文书
知识竞赛活动方案
2014/02/18 职场文书
企业贷款委托书格式
2014/09/12 职场文书
药店采购员岗位职责
2014/09/30 职场文书
如何Tomcat中使用ipv6地址
2022/05/06 Servers