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中的call实现继承
Jan 22 Javascript
JavaScript中的对象化编程
Jan 16 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 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
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
javascript string字符串优化问题
2011/07/31 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
详解webpack2+React 实例demo
2017/09/11 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
python逆序打印各位数字的方法
2018/06/25 Python
python实现图片批量压缩程序
2018/07/23 Python
python使用Geany编辑器配置方法
2020/02/21 Python
python下载的库包存放路径
2020/07/27 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
Shell如何接收变量输入
2016/08/06 面试题
信息服务专业毕业生求职信
2014/03/02 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
dubbo服务整合zipkin详解
2021/07/26 Java/Android