虽然做项目时，有框架可以用，但是有时框架里的功能不能完全满足我们的需求，比如弹层，二级弹层，三级弹层等。小编自己总结了下，用小demo说明问题。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>拖拽</title> 6 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> 7 <style> 8 *{margin: 0;padding: 0;} 9 #box{ 10 width: 200px; 11 height: 200px; 12 background:green; 13 position: absolute; 14 } 15 #a1{ 16 width: 200px; 17 height: 36px; 18 background-color: red; 19 cursor: move; 20 } 21 </style> 22 </head> 23 <body> 24 <div id="box"> 25 <div id="a1"></div> 26 </div> 27 </body> 28 <script> 29 //鼠标按下去的坐标 30 $(function(){ 31 var disX = 0; 32 var disY = 0; 33 $('#a1').mousedown(function(ev){ 34 disX = ev.pageX - $(this).offset().left; 35 disY = ev.pageY - $(this).offset().top; 36 $(document).mousemove(function(ev){ 37 $('div').css('left',ev.pageX - disX); 38 $('div').css('top',ev.pageY - disY); 39 }); 40 $(document).mouseup(function(){ 41 $(document).off(); 42 }); 43 return false; 44 }); 45 }); 46 </script> 47 </html>
只有局部红色区域可以拖拽动，其余绿色区域不能拖拽，很常用的一个拖拽，比如百度的登录框，多个弹层嵌套，可以自己额外写二级弹层及以上弹层，完全可以模仿框架的一级弹层和功能。
再贴一个和以上demo一样的功能，只是用纯原生写的，让不懂的小伙伴瞄瞄。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>原生javascript拖拽</title> 6 </head> 7 <style> 8 #div1{ 9 width: 100px; 10 height: 100px; 11 background:green; 12 position:absolute; 13 } 14 #box{ 15 width: 100px; 16 height: 20px; 17 background-color: red; 18 cursor: move; 19 20 } 21 </style> 22 <script> 23 window.onload=function(){ 24 var oDiv=document.getElementById('box'); 25 var oDiv1=document.getElementById('div1'); 26 var disX=0; 27 var disY=0; 28 oDiv.onmousedown=function(ev){ 29 var ev=ev||window.event; 30 disX=ev.clientX-oDiv1.offsetLeft; 31 disY=ev.clientY-oDiv1.offsetTop; 32 document.onmousemove=function(ev){ 33 var ev=ev||window.event; 34 oDiv1.style.left=ev.clientX-disX+'px'; 35 oDiv1.style.top=ev.clientY-disY+'px'; 36 console.log(111) 37 }; 38 document.onmouseup=function(){ 39 document.onmousemove=null; 40 document.onmouseup=null; 41 }; 42 return false; 43 }; 44 } 45 46 </script> 47 <body> 48 <div id="div1"> 49 <div id="box"></div> 50 </div> 51 </body> 52 </html>
还是只有红色区域可以拖拽动，绿色区域不可以拖拽动。通过拖拽子元素，计算的left和top值再赋给父元素，父元素带着子元素一起动起来了。
最后说下在浏览器可视范围内拖拽。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>原生javascript拖拽-可视区域</title> 6 </head> 7 <style> 8 *{margin:0;} 9 html,body{ 10 height: 100%; 11 } 12 #div1{ 13 width: 100px; 14 height: 100px; 15 background:green; 16 position:absolute; 17 } 18 #box{ 19 width: 100px; 20 height: 20px; 21 background-color: red; 22 cursor: move; 23 24 } 25 </style> 26 <script> 27 window.onload=function(){ 28 var oDiv=document.getElementById('box'); 29 var oDiv1=document.getElementById('div1'); 30 var disX=0; 31 var disY=0; 32 oDiv.onmousedown=function(ev){ 33 var wh=document.body.clientHeight-100; 34 var ww=document.body.clientWidth-100; 35 var ev=ev||window.event; 36 disX=ev.clientX-oDiv1.offsetLeft; 37 disY=ev.clientY-oDiv1.offsetTop; 38 document.onmousemove=function(ev){ 39 var ev=ev||window.event; 40 oDiv1.style.left=(ev.clientX-disX<0)?0:((ev.clientX-disX>ww)?(ww+'px'):(ev.clientX-disX+'px')); 41 oDiv1.style.top=(ev.clientY-disY<0)?0:((ev.clientY-disY>wh)?(wh+'px'):(ev.clientY-disY+'px')); 42 }; 43 document.onmouseup=function(){ 44 document.onmousemove=null; 45 document.onmouseup=null; 46 }; 47 return false; 48 }; 49 } 50 </script> 51 <body> 52 <div id="div1"> 53 <div id="box"></div> 54 </div> 55 </body> 56 </html>
监听窗口的拖拽。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>拖拽监听窗口</title> 6 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> 7 <style> 8 *{margin: 0;padding: 0;} 9 html,body{ 10 height: 100%; 11 } 12 #box{ 13 width: 200px; 14 height: 200px; 15 background:green; 16 position: absolute; 17 } 18 #a1{ 19 width: 200px; 20 height: 36px; 21 background-color: red; 22 cursor: move; 23 } 24 </style> 25 </head> 26 <body> 27 <div id="box"> 28 <div id="a1"></div> 29 </div> 30 </body> 31 <script> 32 //鼠标按下去的坐标 33 $(function(){ 34 $(window).on('resize',function(){ 35 var ww=document.body.clientWidth-200; 36 var wh=document.body.clientHeight-200; 37 $('#box').css('left',ww/2+'px'); 38 $('#box').css('top',wh/2+'px'); 39 }) 40 var disX = 0; 41 var disY = 0; 42 $('#a1').mousedown(function(ev){ 43 var ww=document.body.clientWidth-200; 44 var wh=document.body.clientHeight-200; 45 disX = ev.pageX - $(this).offset().left; 46 disY = ev.pageY - $(this).offset().top; 47 $(document).mousemove(function(ev){ 48 var pX=(ev.pageX - disX<0)?0:((ev.pageX - disX>ww)?ww:(ev.pageX - disX)); 49 var pY=(ev.pageY - disY<0)?0:((ev.pageY - disY>wh)?wh:(ev.pageY - disY)); 50 $('div').css('left',pX); 51 $('div').css('top',pY); 52 }); 53 $(document).mouseup(function(){ 54 $(document).off(); 55 }); 56 return false; 57 }); 58 }); 59 </script> 60 </html>
面向对象 的拖拽
1 window.onload = function(){ 2 3 var d1 = new Drag('div1'); 4 d1.init(); 5 6 }; 7 8 function Drag(id){ 9 this.oDiv = document.getElementById(id); 10 this.disX = 0; 11 this.disY = 0; 12 } 13 Drag.prototype.init = function(){ 14 15 var This = this; 16 17 this.oDiv.onmousedown = function(ev){ 18 var ev = ev || window.event; 19 This.fnDown(ev); 20 return false; 21 }; 22 }; 23 Drag.prototype.fnDown = function(ev){ 24 25 var This = this; 26 this.disX = ev.clientX - this.oDiv.offsetLeft; 27 this.disY = ev.clientY - this.oDiv.offsetTop; 28 29 document.onmousemove = function(ev){ 30 var ev = ev || window.event; 31 This.fnMove(ev); 32 }; 33 document.onmouseup = this.fnUp; 34 35 }; 36 Drag.prototype.fnMove = function(ev){ 37 this.oDiv.style.left = ev.clientX - this.disX + 'px'; 38 this.oDiv.style.top = ev.clientY - this.disY + 'px'; 39 }; 40 Drag.prototype.fnUp = function(){ 41 document.onmousemove = null; 42 document.onmouseup = null; 43 };
