首页新闻找找看学习计划

关于可拖拽对象的定位问题

0
悬赏园豆:10 [待解决问题]

我自己写了一个可以拖拽的弹出层,拖拽没问题。弹出的时候,层应该在正中间,现在位置偏下了。在调整窗口大小的时候,位置是对的。这是怎么回事?还有我想让它跟随页面滚动,该怎么实现呢?(如果我把弹出层设定为固定定位,除ie6浏览器是可以的。)现在我把这部分代码贴上来,注释掉的部分是我做的尝试,但是无效……请大家指教!

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5 <title>个人主页</title>
  6 <script type="text/javascript">
  7 function myAddEvent(obj, ev, fn){
  8   if(obj.attachEvent){
  9     obj.attachEvent('on'+ev, fn);
 10   }
 11   else {
 12     obj.addEventListener(ev, fn, false);
 13   }
 14 };
 15 
 16 function getPos(ev){
 17   var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //ie, ff; chrome
 18   var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
 19   
 20   return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
 21 };
 22 
 23 myAddEvent(window,'resize',function(){
 24   var oDivSend=document.getElementById('sendWin');
 25   var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
 26 
 27   oDivSend.style.top=(document.documentElement.clientHeight-oDivSend.offsetHeight)/2+scrollTop+'px';
 28   oDivSend.style.left='50%';
 29   oDivSend.style.marginLeft='-275px';
 30 });
 31 
 32 /*var newTop='';
 33 
 34 myAddEvent(window,'scroll',function(){
 35   var oDivSend=document.getElementById('sendWin');
 36 
 37   oDivSend.style.top=newTop+'px';
 38 });*/
 39 
 40 window.onload=function(){
 41   var oBtnSend=document.getElementById('send');
 42   var oDivSend=document.getElementById('sendWin');
 43 
 44   oBtnSend.onclick=function(){
 45     var oDivMask=document.createElement('div');
 46     var oBtnShut=document.getElementById('shut');
 47     var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
 48 
 49     oDivSend.style.top=(document.documentElement.clientHeight-oDivSend.offsetHeight)/2+scrollTop+'px';
 50     oDivMask.className='mask';
 51     oDivMask.style.height=document.documentElement.scrollHeight+'px';
 52     document.body.appendChild(oDivMask);
 53     oDivSend.style.display='block';
 54 
 55     oBtnShut.onclick=function(){
 56       oDivSend.style.display='none';
 57       document.body.removeChild(oDivMask);
 58       oDivSend.style.left='50%';
 59       oDivSend.style.marginLeft='-275px';
 60     };
 61   };
 62 
 63   var oPTitle=oDivSend.getElementsByTagName('p')[0];
 64   var disX=0;
 65   var disY=0;
 66 
 67   oPTitle.onmousedown=function(ev){
 68     var oEvent=ev||event;
 69     var pos=getPos(oEvent);
 70     var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
 71 
 72     disX=pos.x-oDivSend.offsetLeft;
 73     disY=pos.y-oDivSend.offsetTop;
 74 
 75     var oDivBox=document.createElement('div');
 76 
 77     oDivBox.className='home-w-b';
 78     oDivBox.style.width=oDivSend.offsetWidth-6+'px';
 79     oDivBox.style.height=oDivSend.offsetHeight-6+'px';
 80     oDivBox.style.left=oDivSend.offsetLeft+'px';
 81     oDivBox.style.top=oDivSend.offsetTop+'px';
 82     document.body.appendChild(oDivBox);
 83 
 84     if(oPTitle.setCapture){
 85       oPTitle.onmousemove=mouseMove;
 86       oPTitle.onmouseup=mouseUp;
 87       oPTitle.setCapture();
 88     }
 89     else{
 90       document.onmousemove=mouseMove;
 91       document.onmouseup=mouseUp;
 92     }
 93 
 94     function mouseMove(ev){
 95       var oEvent=ev||event;
 96       var pos=getPos(oEvent);
 97       var l=pos.x-disX;
 98       var t=pos.y-disY;
 99       var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
100 
101       if(l<0){
102         l=0;
103       }
104       else if(l>document.documentElement.clientWidth-oDivBox.offsetWidth){
105         l=document.documentElement.clientWidth-oDivBox.offsetWidth;
106       }
107 
108       if(t<scrollTop){
109         t=scrollTop;
110       }
111       else if(t>document.documentElement.clientHeight-oDivBox.offsetHeight+scrollTop){
112         t=document.documentElement.clientHeight-oDivBox.offsetHeight+scrollTop;
113       }
114 
115       oDivBox.style.left=l+'px';
116       oDivBox.style.top=t+'px';
117     };
118 
119     function mouseUp(){
120       this.onmousemove=null;
121       this.onmouseup=null;
122 
123       oDivSend.style.left=oDivBox.offsetLeft+'px';
124       //newTop=oDivSend.style.top=oDivBox.offsetTop+'px';
125       oDivSend.style.top=oDivBox.offsetTop+'px';
126       oDivSend.style.marginLeft='0';
127       document.body.removeChild(oDivBox);
128 
129       if(oPTitle.releaseCapture){
130         oPTitle.releaseCapture();
131       }
132     };
133 
134     return false;
135   };
136 };
137 </script>
138 <style type="text/css">
139 html {
140   font-family: "微软雅黑", tahoma, arial, \5b8b\4f53, sans-serif;
141   font-size: 12px;
142   _background: url(about:blank) fixed;
143 }
144 body {
145   color: #444;
146   background-color: #F9F9F9;
147   line-height: 1.5;
148   height: 3000px;
149 }
150 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
151   margin:0;padding:0;
152 }
153 .extra-p-btn-m:link, .extra-p-btn-m:visited {
154   display: inline-block;
155   background: #2CC0FF;
156   line-height: 35px;
157   padding: 0 15px 0 30px;
158   font-size: 14px;
159   color: white;
160   border-radius: 3px;
161   -moz-border-radius: 3px;
162   -webkit-border-radius: 3px;
163 }
164 .extra-p-btn-m:hover {
165   background-color: #28B1EB;
166 }
167 .content {
168   width: 990px;
169   margin: 20px auto 25px;
170 }
171 .home-w-x {
172   display: block;
173   position: absolute;
174   top: 10px;
175   right: 10px;
176   z-index: 2000;
177 }
178 .home-w {
179   background-color: white;
180   border: 3px solid #D1D1D1;
181   position: absolute;
182   left: 50%;
183   margin-left: -275px;
184   z-index: 6000;
185   width: 543px;
186   box-shadow: 0 1px 3px rgba(0,0,0,.2);
187   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2);
188   -moz-box-shadow: 0 1px 3px rgba(0,0,0,.2);
189   border-radius: 4px;
190   -moz-border-radius: 4px;
191   -webkit-border-radius: 4px;
192   display: none;
193 }
194 .mask {
195   position: absolute;
196   left: 0;
197   top: 0;
198   z-index: 5500;
199   width: 100%;
200   background-color: black;
201   opacity: 0.5;
202   filter: alpha(opacity=50);
203 }
204 .home-w-b {
205   border: solid 3px black;
206   background-color: white;
207   opacity: 0.5;
208   filter: alpha(opacity=50);
209   position: absolute;
210   z-index: 6500;
211 }
212 .home-w-t {
213   font-weight: 700;
214   margin-bottom: 30px;
215   border-bottom: solid 1px #E7E7E7;
216   font-size: 16px;
217   line-height: 42px;
218   padding-left: 20px;
219   cursor: move;
220 }
221 .blank-260 {
222   height: 260px;
223   font-size: 0;
224 }
225 </style>
226 </head>
227 <body>
228 <div class="content">
229   <a href="javascript:;" id="send" class="extra-p-btn-m">发消息</a>
230 </div>
231 <div class="home-w" id="sendWin">
232   <a href="javascript:;" class="home-w-x" id="shut">关闭</a>
233   <p class="home-w-t">正在给老师发消息</p>
234   <div class="blank-260"></div>
235 </div>
236 </body>
237 </html>
View Code
zanetti的主页 zanetti | 初学一级 | 园豆:152
提问于:2014-11-20 14:01
< >
分享
所有回答(1)
0

代码太多,懒得看了,在你不知道方法的时候,参考别人的作品会给你带来灵感的。。。

https://github.com/tianxiangbing/dialog/blob/daily/1.0.0/src/dialog.js 这里有我写的dialog的早期版本的作法

setPosition: function() {
        this.mask.height(document.documentElement.scrollHeight || document.body.scrollHeight);
        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
        var top = (clientHeight - this.height) / 2 + document.body.scrollTop;
        var left = (clientWidth - this.width) / 2;
        if (left < 0) {
            left = 0;
        }
        if (top < document.body.scrollTop) {
            top = document.body.scrollTop;
        }
        this.dialogContainer.css({
            top: top,
            left: left
        })
    }

但后面我还是改成fixed了,IE6放弃吧,技术人员要推进IE67的灭亡,不能惯着用户。

田想兵 | 园豆:244 (菜鸟二级) | 2015-05-11 17:36

其实我也不想惯着用户,公司要求兼容 ie6……我看了一遍你的代码,写得很详细!不过你做的弹出层没有拖动功能。我加了拖动之后,就不会在 ie6 固定定位了。谢谢你的回答!

支持(0) 反对(0) zanetti | 园豆:152 (初学一级) | 2015-05-15 22:39
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册