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 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
angular之ng-template模板加载
Nov 09 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 Javascript
iview实现图片上传功能
Jun 29 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 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
Prototype框架详解
2015/11/25 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Python for循环中的陷阱详解
2018/07/13 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
旅游管理毕业生自荐信
2013/11/05 职场文书
2014年大学生自我评价
2014/01/19 职场文书
法制宣传标语集锦
2014/06/25 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
2014年科室工作总结
2014/11/20 职场文书
六一儿童节开幕词
2015/01/29 职场文书
运动会广播稿100字
2015/08/19 职场文书
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android