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调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
微信小程序 如何保持登录状态
Aug 16 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
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
php 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
基于php split()函数的用法详解
2013/06/05 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
node.js操作mongodb学习小结
2015/04/25 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
Python换行与不换行的输出实例
2020/02/19 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
军训自我鉴定
2014/01/22 职场文书
置业顾问岗位职责
2014/03/02 职场文书
2014年冬季防火方案
2014/05/21 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书
化工见习报告范文
2014/10/31 职场文书
高一军训决心书
2015/02/05 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技