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的Function详细
Nov 14 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 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
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
js初始化验证实例详解
2016/11/26 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
详解vuex的简单使用
2018/03/12 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
基于python操作ES实例详解
2019/11/16 Python
Django跨域请求原理及实现代码
2020/11/14 Python
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
中式婚礼主持词
2014/03/13 职场文书
党员群众路线承诺书
2014/05/20 职场文书
求职信内容怎么写
2014/05/26 职场文书
财务管理专业自荐书
2014/09/02 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
指导教师推荐意见
2015/06/05 职场文书
团拜会主持词
2015/07/04 职场文书
大学运动会通讯稿
2015/07/18 职场文书
Python必备技巧之字符数据操作详解
2022/03/23 Python
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏
mysql sock文件存储了什么信息
2022/07/15 MySQL