jQuery窗口拖动功能的实现代码

前端之家收集整理的这篇文章主要介绍了jQuery窗口拖动功能的实现代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<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 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/jquery/42037.html

猜你在找的jQuery相关文章