JS实现移动层

浏览数：39 / 时间：2015年06月11日

在网上搜了很多实现移动层的代码，体验都不太好，于是自己写了，贴在这里先。

html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        *{margin: 0;padding: 0;}
        .warp{
            width: 400px;
            height: 300px;
            border: 1px solid #C2C2C2;
            border-radius: 3px;
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 99;
        }
        .move{
            width: 400px;
            height: 50px;
            background: -webkit-linear-gradient(top,#f2f2f2,#C2C2C2);
            cursor:move;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            z-index: 100;
        }
        .content{
            width: inherit;
            height: 250px;;
            background: #f2f2f2;
        }
    </style>

</head>
<body style="width: 100%;height: 1000px;background: red;">
<!--移动层begin-->
  <div class="warp" id="warp">
    <div class="move" id="move"></div>
    <div class="content"></div>
  </div>
<!--移动层end-->
<script src="js/tt.0.0.1.js"></script>
<script>
    TT.drag("warp","move");
</script>
</body>
</html>

JS:

  1 /**
  2  * _TT
  3  * version：0.0.1
  4  * author：[email protected]
  5  */
  6 function TT(){
  7     var _w = window;
  8         _d = _w.document;
  9         _self = this;
 10     /*
 11      *拖拽
 12      */
 13     this.drag = function moveDivByOtherDiv(moveDiv,dargDiv){
 14         var mDiv = _d.getElementById(moveDiv),
 15             dDiv = _d.getElementById(dargDiv),
 16             mW = WindowUtil.getPageWidth(),
 17             mH = _d.body.offsetHeight,
 18             oW = mDiv.offsetWidth,
 19             oH = mDiv.offsetHeight,
 20             gX = 0,
 21             gY = 0;
 22         //鼠标在目标层上按下
 23         function eMouseDown(event){
 24             var e = event || _w.event;
 25 //                if(e.button&&e.button!==0){return false;} //鼠标左键点击触发
 26             EventUtil.stopPropagationAndPreventDefault(e);
 27             gX = e.clientX - OffsetUtil.getElementLeft(mDiv);
 28             gY = e.clientY - OffsetUtil.getElementTop(mDiv);
 29             dDiv.isMove = true;
 30         }
 31         //鼠标在document中移动
 32         function eMouseMove(event){
 33             var e = event || _w.event,
 34                 mX = 0,
 35                 mY = 0;
 36             if(!dDiv.isMove){return false;}
 37             EventUtil.stopPropagationAndPreventDefault(e);
 38             mY = e.clientY-gY;
 39             mX = e.clientX-gX;
 40             if(mX<0){
 41                 mX = 0;
 42             }else if(mX>mW-oW){
 43                 mX = mW-oW;
 44             }
 45             if(mY<0){
 46                 mY = 0;
 47             }else if(mY>mH-oH){
 48                 mY = mH-oH;
 49             }
 50             mDiv.style.top = mY+"px";
 51             mDiv.style.left = mX+"px";
 52         }
 53         //鼠标在document上松开
 54         function eMouseUp(event){
 55             var e = event || _w.event;
 56             EventUtil.stopPropagationAndPreventDefault(e);
 57             dDiv.isMove = false;
 58         }
 59         EventUtil.addHandler(dDiv,"mousedown",eMouseDown);
 60         EventUtil.addHandler(_d,"mouseup",eMouseUp);
 61         EventUtil.addHandler(_d,"mousemove",eMouseMove);
 62     }
 63     /*
 64      *事件相关函数
 65      */
 66     var EventUtil = {
 67         //添加事件
 68         addHandler : function(element,type,handler){
 69             if(element.addEventListener){
 70                 element.addEventListener(type,handler,false);
 71             }else if(element.attachEvent){
 72                 element.attachEvent("on"+type,handler)
 73             }else{
 74                 element["on"+type] = handler;
 75             }
 76         },
 77         //移除事件
 78         removeHandler : function(element,type,handler){
 79             if(element.removeEventListener){
 80                 element.removeEventListener(type,handler,false);
 81             }else if(element.detachEvent){
 82                 element.detachEvent("on"+type,handler);
 83             }else{
 84                 element["on"+type] = null;
 85             }
 86         },
 87         //阻止事件冒泡
 88         stopPropagation : function(e){
 89             if (e.bubbles&&e.stopPropagation){
 90                 e.stopPropagation();
 91             }else if(e.cancelBubble){
 92                 //阻止IE中冒泡事件
 93                 e.cancelable = true;
 94             }
 95         },
 96         //阻止默认事件
 97         preventDefault : function(e){
 98             if (e.cancelable&&e.preventDefault){
 99                 e.preventDefault();
100             }else if(e.returnValue){
101                 //阻止IE中的默认事件
102                 e.returnValue = false;
103             }
104         },
105         //阻止事件冒泡同时阻止默认事件
106         stopPropagationAndPreventDefault : function(e){
107             this.stopPropagation(e);
108             this.preventDefault(e);
109         }
110     };
111     /*
112      *位置相关函数
113      */
114     var OffsetUtil = {
115         //获得元素距离窗口左边距离
116         getElementLeft : function(element){
117             var actual = element.offsetLeft,
118                 current = element.offsetParent;
119             while(current!==null){
120                 actual += current.offsetLeft;
121                 current = current.offsetParent;
122             }
123             return actual;
124         },
125         //获得元素距离窗口上边的距离
126         getElementTop : function(element){
127             var actual = element.offsetTop,
128                 current = element.offsetParent;
129             while(current!==null){
130                 actual += current.offsetTop;
131                 current = current.offsetParent;
132             }
133             return actual;
134         }
135     };
136     /*
137      *窗口相关工具函数
138      */
139     var WindowUtil = {
140         //获得页面视口宽度
141         getPageWidth : function(){
142             var pageWidth = window.innerWidth;
143             if(typeof pageWidth != "number"){
144                 if(document.compatMode == "CSS1Compat"){
145                     pageWidth = document.documentElement.clientWidth;
146                 }else{
147                     pageWidth = document.body.clientWidth;
148                 }
149             }
150             return pageWidth;
151         },
152         //获得页面视口高度
153         getPgaeHeight : function(){
154             var pageHeight = window.innerHeight;
155             if(typeof  pageHeight != "number"){
156                 if(document.compatMode == "CSS1Compat"){
157                     pageHeight = document.documentElement.clientHeight;
158                 }else{
159                     pageHeight = document.body.clientHeight;
160                 }
161             }
162             return pageHeight;
163         }
164     }
165 };
166 //实例化对象
167 var TT = new TT();