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 相关文章推荐
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
细说Vue组件的服务器端渲染的过程
May 30 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
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 array_values 返回数组的值实例详解
2016/11/17 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
php读取本地json文件的实例
2018/03/07 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
盘点提高 Python 代码效率的方法
2014/07/03 Python
在Python中操作字典之update()方法的使用
2015/05/22 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
python日志记录模块实例及改进
2017/02/12 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
Python实现多属性排序的方法
2018/12/05 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
常用的10个Python实用小技巧
2020/08/10 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
几道PHP面试题
2013/04/14 面试题
大学生实习思想汇报
2014/01/12 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
活动宣传稿范文
2015/07/23 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
OpenFeign实现远程调用
2022/08/14 Java/Android