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 建立对象的方法
Apr 21 Javascript
javascript 操作文件 实现方法小结
Jul 02 Javascript
css样式标签和js语法属性区别
Nov 06 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
javascript 函数速查表
2010/02/07 Javascript
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
JS实现图片切换效果
2018/11/17 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
nohup的用法
2012/11/26 面试题
AJax面试题
2014/11/25 面试题
会计主管岗位职责
2014/01/03 职场文书
班主任工作年限证明
2014/01/12 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
小学运动会报道稿
2014/10/04 职场文书
导游词300字
2015/02/13 职场文书
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS