<p style="text-align: center">
具体代码如下所示:
documentWidth - showWidth) {
divwidth = documentWidth - showWidth - 5;
}
if (divheight > documentHeight - showHeight) {
divheight = documentHeight - showHeight - 5;
}
$("#show").css({ "left": divwidth,"top": divheight });
}
})
下面看下jQuery 鼠标拖拽移动窗口的实现代码
拖拽移动需要注意的是:拖拽移动的窗口是如何定位的,如果"left"属性为"%" ,以"margin-left"来计算定位,如下实例,如果"left"属性为数字,直接使用"left"即可。
h3");
var _dragBody = _dragZone.parent();
_dragZone.mousedown(function(e){
$(this).attr("onselectstart","return false"); //禁双击选中
$("body").css({"-webkit-user-select":"none","-moz-user-select":"none","-ms-user-select":"none","-khtml-user-select":"none","user-select":"none"}); //禁止选中文字
_move=true;
_x=e.pageX-parseInt(_dragBody.css("margin-left"));
_y=e.pageY-parseInt(_dragBody.css("margin-top"));
_dragBody.fadeTo(150,0.5);
});
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
if(e.pageX <= 0 || e.pageY <= 0){
_move=false;
}else {
_dragBody.css({marginLeft:x,marginTop:y});//控件新位置
}
}
}).mouseup(function(){
_move=false;
_dragBody.fadeTo("fast",1);
$("body").removeAttr("style"); //移除不能选文字
});
});
以上所述是小编给大家介绍的jQuery窗口拖动功能的实现代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
原文链接:/jquery/42037.html