第一篇博客从js通用方法笔记开始

第一个留存的方法

 1 $(function(){
 2     dragPanelMove(downDiv,moveDiv);
 3 });
 4 
 5 //div块的拖拽事件（点击标题部分拖动整个模块在浏览器可视区域内移动，参数：downDiv:鼠标按下触发移动动作的div盒子(例如提示框的标题);moveDiv：移动的盒子）
 6 function dragPanelMove(downDiv, moveDiv) {
 7     $(downDiv).mousedown(function (e) {
 8         var isMove = true;
 9         var disX = e.clientX - $(moveDiv).offset().left;     //移动盒子的左边距
10         var disY = e.clientY - $(moveDiv).offset().top;      //移动盒子的上边距
11 
12         var boxWidth = $(moveDiv).width();  //盒子的宽
13         var boxHeight = $(moveDiv).height();    //盒子的高
14         var browserWidth = document.documentElement.clientWidth;    //浏览器可视宽
15         var browserHeight = document.documentElement.clientHeight;      //浏览器可视高
16 
17         var objL = "",objT = "";    //左上边距
18         $(document).mousemove(function (e) {
19             if (isMove) {
20                 objL = (e.clientX - disX) + 'px';
21                 if((e.clientX - disX)<=0){
22                     objL = 0;
23                 }else if((boxWidth - disX + e.clientX) >= browserWidth){
24                     objL = browserWidth - boxWidth + "px";
25                 }
26                 objT = (e.clientY - disY) + 'px';
27                 if((e.clientY - disY) <= 0){
28                     objT = 0;
29                 }else if((boxHeight - disY + e.clientY) >= browserHeight){
30                     objT = browserHeight - boxHeight + "px";
31                 }
32                 $(moveDiv).css({"left": objL, "top": objT});
33             }
34         }).mouseup(function () {
35             isMove = false;
36         });
37     });
38 }