原生js實現模態框拖動
阿新 • • 發佈：2021-07-07
由於本人水平有限，不足之處請大佬指出！
1.引入reset.css
https://meyerweb.com/eric/tools/css/reset/index.html;
2.編寫html檔案
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> <linkrel="stylesheet"href="./css/reset.css"> <linkrel="stylesheet"href="./css/index.css"> <scriptsrc="./js/index.js"></script> </head> <body> <divclass="fun"> <divclass="body-size"> <labelfor="">控制內容的高度：</label> <inputtype="text"class="ctrlBodySizeIpt"> <buttonclass="ctrlBodySizeBtn">確認修改</button> <labelfor="">注意：內容的高度相對於頭部和頂部的份數</label> </div> </div> <divclass="showModal"> <buttonclass="showModalBtn">顯示模態框</button> </div> <divclass="drag"> <divclass="drag-header"> <divclass="close">X</div> </div> <divclass="drag-body"></div> <divclass="drag-footer"></div> </div> </body> </html> 3.編寫index.css檔案 body{ background-color:rgba(0,0,0,.3); } .drag{ display:flex; flex-direction:column; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:50%; height:600px; background-color:#ccc; border-radius:8px; border:1pxsolid#999; z-index:20210706; } .drag.drag-header{ position:relative; width:100%; flex:1; background-color:antiquewhite; cursor:pointer; } .drag.drag-body{ width:100%; flex:7; background-color:beige; } .drag.drag-footer{ width:100%; flex:1; background-color:skyblue; } .drag.drag-header.close{ position:absolute; top:50%; right:20px; transform:translateY(-50%); font-size:24px; font-weight:700; padding:8px; } 4.編寫js檔案window.onload=function(){ varcommonState={ $:function(ele){ returndocument.querySelector(ele); }, drag:null, getDrag:function(){ returnthis.$('.drag'); }, getCloseBtn:function(){ returnthis.$('.close'); }, getShowModalBtn:function(){ returnthis.$('.showModalBtn'); } } //模態框拖動 vardragModal={ innerX:null, innerY:null, dragInitX:null, dragInitY:null, init:function(){ this.dragInitX=commonState.$('.drag').offsetLeft; this.dragInitY=commonState.$('.drag').offsetTop; console.log(this.dragInitX) this.press(); this.up(); }, press:function(){ commonState.$('.drag-header').addEventListener('mousedown',(e)=>{ if(e.button===0){ commonState.$('.drag').removeEventListener('mousemove',this.moveFn); this.innerX=e.pageX-this.dragInitX; this.innerY=e.pageY-this.dragInitY; console.log(this.dragInitX) this.move(); } }) }, move:function(){ commonState.$('.drag-header').addEventListener('mousemove',this.moveFn); }, moveFn:(e)=>{ commonState.$('.drag').style.left=(e.pageX-dragModal.innerX)+'px'; commonState.$('.drag').style.top=(e.pageY-dragModal.innerY)+'px'; }, up:function(){ commonState.$('.drag-header').addEventListener('mouseup',(e)=>{ if(e.button===0){ console.log('up') constdragInitX=e.pageX-this.innerX; constdragInitY=e.pageY-this.innerY; commonState.$('.drag').style.left=dragInitX+'px'; commonState.$('.drag').style.top=dragInitY+'px'; this.dragInitX=dragInitX; this.dragInitY=dragInitY; commonState.$('.drag-header').removeEventListener('mousemove',this.moveFn); } }) } }; dragModal.init();
//輸入值控制內容大小功能 varfunState={ init:function(){ this.ctrlBodySize(); }, dragBody:null, ctrlBodySizeIpt:null, ctrlBodySizeIpt:null, ctrlBodySize:function(){ this.dragBody=commonState.$('.drag-body'); this.ctrlBodySizeIpt=commonState.$('.ctrlBodySizeIpt'); this.ctrlBodySizeBtn=commonState.$('.ctrlBodySizeBtn'); this.ctrlBodySizeBtn.addEventListener('click',()=>{ constiptVal=this.ctrlBodySizeIpt.value; if(iptVal)this.dragBody.style.flex=iptVal; elsealert('pleaseinputvalue'); }) } } funState.init();
//關閉模態框 varcloseState={ init:function(){ commonState.getCloseBtn().addEventListener('click',()=>{ commonState.getDrag().style.display='none'; }) commonState.getShowModalBtn().addEventListener('click',()=>{ commonState.getDrag().style.display='flex'; }) } } closeState.init(); }