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 相关文章推荐
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
layui导出所有数据的例子
Sep 10 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 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
第十一节 重载 [11]
2006/10/09 PHP
php str_pad 函数使用详解
2009/01/13 PHP
PHP 递归效率分析
2009/11/24 PHP
php的字符串用法小结
2010/06/08 PHP
定义php常量的详解
2013/06/09 PHP
php获取远程文件大小
2015/10/20 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
中文系学生自荐信范文
2013/11/13 职场文书
优秀毕业大学生推荐信
2013/11/13 职场文书
七一表彰活动方案
2014/01/18 职场文书
优秀学生事迹材料
2014/02/08 职场文书
星级党支部申报材料
2014/05/31 职场文书
班训口号大全
2014/06/18 职场文书
大学迎新生标语
2014/10/06 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
酒店前台辞职书
2015/02/26 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
鸡毛信观后感
2015/06/11 职场文书
微信早安问候语
2015/11/10 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang