jquery之窗口拖动

107 阅读 0 评论 71 点赞

我是靠谱客的博主风趣发箍，这篇文章主要介绍jquery之窗口拖动，现在分享给大家，希望可以做个参考。

复制代码

$("#showTitle").mousedown(function (e) {
vbool = true;
vHeight = e.pageY;
vWidth = e.pageX;
cHeight = vHeight - $("#show").offset().top;
cWdith = vWidth - $("#show").offset().left;
//alert("divshow" + $("#show").offset().top + " divvHeight" + vHeight);
//alert("高" + cHeight + " 宽" + cWdith);
})
$(document).mouseup(function () {
vbool = false;
})
var showWidth = $("#show").width();
var showHeight = $("#show").height();
var documentWidth = $(document).width();
var documentHeight = $(document).height();
$(document).mousemove(function (e) {
if (vbool) {
var divheight = e.pageY - cHeight;//窗口要移动到的位置
var divwidth = e.pageX - cWdith;//窗口要移动到的位置
$("#la1").text(divheight + "w" + divwidth + "win" + showWidth + " x " + documentWidth + "" + showWidth);
if (divwidth < 0) {
divwidth = 0;
}
if (divheight < 50) {
divheight = 50;
}
if (divwidth > documentWidth - showWidth) {
divwidth = documentWidth - showWidth - 5;
}
if (divheight > documentHeight - showHeight) {
divheight = documentHeight - showHeight - 5;
}
$("#show").css({ "left": divwidth, "top": divheight });
}
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

$("#showTitle").mousedown(function (e) {
vbool = true;
vHeight = e.pageY;
vWidth = e.pageX;
cHeight = vHeight - $("#show").offset().top;
cWdith = vWidth - $("#show").offset().left;
//alert("divshow" + $("#show").offset().top + " divvHeight" + vHeight);
//alert("高" + cHeight + " 宽" + cWdith);
})
$(document).mouseup(function () {
vbool = false;
})
var showWidth = $("#show").width();
var showHeight = $("#show").height();
var documentWidth = $(document).width();
var documentHeight = $(document).height();
$(document).mousemove(function (e) {
if (vbool) {
var divheight = e.pageY - cHeight;//窗口要移动到的位置
var divwidth = e.pageX - cWdith;//窗口要移动到的位置
$("#la1").text(divheight + "w" + divwidth + "win" + showWidth + " x " + documentWidth + "" + showWidth);
if (divwidth < 0) {
divwidth = 0;
}
if (divheight < 50) {
divheight = 50;
}
if (divwidth > documentWidth - showWidth) {
divwidth = documentWidth - showWidth - 5;
}
if (divheight > documentHeight - showHeight) {
divheight = documentHeight - showHeight - 5;
}
$("#show").css({ "left": divwidth, "top": divheight });
}
})