在网页上我们经常看到，当点击一个按钮时，弹出一个自定义窗口，并且可以随意的拖拽，从而改变其位置
使用jquery实现拖拽，则必须要jquery的文件了，实现步骤：
1、引入jquery文件
2、编写js脚本
具体代码：
html代码：
代码如下:
X
css样式：
代码如下:
js脚本：
代码如下:
$(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);
});
}
引入的js文件
代码如下:
