在网页上我们经常看到,当点击一个按钮时,弹出一个自定义窗口,并且可以随意的拖拽,从而改变其位置
使用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实现拖拽排序插件.zip
哈哈,别人写的,分享给大家,jquery实现拖拽DIV ,textbox ,添加和删除,修改textbox的 text属性
jQuery实现拖动布局并将排序结果保存到数据库
用jQuery实现拖拽的小例子,简单了些,如有不足之处还望各位看官海涵,,开源万岁
用jquery实现table拖拽列功能,可动态改变表格列宽度,并且实现table表格100%的问题,如果列缩小,则自动拉伸最后一列以实现table100%的效果,如果拉伸长度比原长度大,则显示x滚动条。
jQuery实现拖拽排序插件Sortable.js.zip
jQuery实现拖拽成员从新分组结构特效源码.zip
自己用js 写的拖拽div, 吸附window 边缘功能。
无jQuery实现拖拽排序Sortable是一款支持触摸设备,轻量级,压缩算法,不需要jQuery支持。
jQuery实现拖动DIV滑块代码源码.zip
简练代码,高效掌握jQuery
jquery和easyui实现购物车添加功能,可以直接拖拽加入
原生JS加jQuery实现拖拽和单击上传文件; 知勤者笔记(https://www.zhiqinzhe.com)可以免费获取本人在CSDN和其他平台上传的资源(或下载地址);
Jquery实现拖动Div排序效果演示代码下载,可以实现拖动排序图片,表格内容顺序等功能,想看在线演示效果的请前往:http://www.ui3g.com/code/uicode-441.html
利用jQuery框架实现最简单的窗口拖拽,轻松实现。