关于可拖拽对象的定位问题
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>
所有回答(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的灭亡，不能惯着用户。
其实我也不想惯着用户，公司要求兼容 ie6……我看了一遍你的代码，写得很详细！不过你做的弹出层没有拖动功能。我加了拖动之后，就不会在 ie6 固定定位了。谢谢你的回答！
