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和firefox js关闭代码
Dec 11 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 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.MVC的模板标签系统(三)
2006/09/05 PHP
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
jQuery 获取URL参数的插件
2010/03/04 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
Python list操作用法总结
2015/11/10 Python
详解Python迭代和迭代器
2016/03/28 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
python和js交互调用的方法
2020/06/23 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
C#面试题
2016/05/06 面试题
个人委托函范文
2015/01/29 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
二十年同学聚会感言
2015/07/30 职场文书
创业计划书之寿司
2019/07/19 职场文书