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动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
微信小程序开发探究
Dec 27 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
mui框架移动开发初体验详解
Oct 11 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
微信小程序云开发 生成带参小程序码流程
May 18 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 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
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
浅谈Python单向链表的实现
2015/12/24 Python
django允许外部访问的实例讲解
2018/05/14 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
Python玩转Excel的读写改实例
2019/02/22 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
Linux的文件类型
2016/07/05 面试题
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
股份合作协议书范本
2014/04/14 职场文书
2014年计生标语
2014/06/23 职场文书
代办委托书怎么写
2014/08/01 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
新娘婚礼致辞
2015/07/27 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript