Jquery实现自定义窗口随意的拖拽
2014-03-12 00:00
706 查看
在网页上我们经常看到,当点击一个按钮时,弹出一个自定义窗口,并且可以随意的拖拽,从而改变其位置
使用jquery实现拖拽,则必须要jquery的文件了,实现步骤:
1、引入jquery文件
2、编写js脚本
具体代码:
html代码:
css样式:
js脚本:
引入的js文件
使用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>
相关文章推荐
- Jquery实现自定义窗口随意的拖拽
- js,jQuery实现拖拽自定义移动端板块,web移动端开发
- HTML页面居中弹出自定义窗口层(实现可拖拽)
- 自定义dialog窗口,根据坐标可随意设置dialog显示位置,实现了窗口弹出动画
- jquery控件-实现自定义样式的弹出窗口和确认框
- jquery和javascript两种实现浮动窗口的拖拽效果(参照网上资料以及韩顺平老师讲解)
- jQuery实现页面模块拖拽与模块自定义效果.rar
- 【JQuery】控件-实现自定义样式的弹出窗口和确认框
- HTML页面居中弹出自定义窗口层(实现可拖拽)
- JQuery实现个性化,可以拖拽 自定义自己的界面(一)
- JQuery实现个性化,可以拖拽 自定义自己的界面(四)
- jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
- jQuery实现自定义样式的弹出窗口和确认框
- JQuery实现个性化,可以拖拽 自定义自己的界面(二)
- JQuery实现个性化,可以拖拽 自定义自己的界面(三)
- android pop自定义弹出窗口实现
- Response.Write 调用 JS文件中自定义的函数,jquery、js调用iframe父窗口与子窗口元素的方法
- 使用jQuery和Bootstrap实现多层、自适应模态窗口
- jquery实现行列的单向固定和列的拖拽
- JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)