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实现iframe动态调整高度的代码
Jan 06 Javascript
JavaScript Event学习第九章 鼠标事件
Feb 08 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
一分钟理解js闭包
May 04 Javascript
Bootstrap基本插件学习笔记之折叠(22)
Dec 08 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 Javascript
es5 类与es6中class的区别小结
Nov 09 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
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
初始Nodejs
2014/11/08 NodeJs
javascript跨域的方法汇总
2015/10/23 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
利用python获得时间的实例说明
2013/03/25 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
Python操作MySQL数据库的方法
2018/06/20 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
Django中FilePathField字段的用法
2020/05/21 Python
Python是什么 Python的用处
2020/05/26 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
项目考察欢迎辞
2014/01/17 职场文书
小学生成长感言
2014/01/30 职场文书
护理不良事件检讨书
2014/02/06 职场文书
企业后勤岗位职责
2014/02/28 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
销售员自我评价
2015/03/11 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python