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 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
JavaScript全局函数使用简单说明
Mar 11 Javascript
Javascript 八进制转义字符(8进制)
Apr 08 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
node.js域名解析实现方法详解
Nov 05 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
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
提升Python程序运行效率的6个方法
2015/03/31 Python
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
深入理解python函数递归和生成器
2016/06/06 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
浅析Django中关于session的使用
2019/12/30 Python
Python类继承和多态原理解析
2020/02/05 Python
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
学习实践科学发展观心得体会
2014/09/10 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
python字符串的一些常见实用操作
2022/04/06 Python
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server