原生js实现模态框拖动
作者：互联网
由于本人水平有限，不足之处请大佬指出！
1.引入reset.css
https://meyerweb.com/eric/tools/css/reset/index.html;
2.编写html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet" href="./css/index.css"> <script src="./js/index.js"></script> </head> <body> <div class="fun"> <div class="body-size"> <label for="">控制内容的高度：</label> <input type="text" class="ctrlBodySizeIpt"> <button class="ctrlBodySizeBtn">确认修改</button> <label for="">注意：内容的高度相对于头部和顶部的份数</label> </div> </div> <div class="showModal"> <button class="showModalBtn">显示模态框</button> </div> <div class="drag"> <div class="drag-header"> <div class="close">X</div> </div> <div class="drag-body"></div> <div class="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: 1px solid #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 () { var commonState = { $: function (ele) { return document.querySelector(ele); }, drag: null, getDrag: function() { return this.$('.drag'); }, getCloseBtn: function() { return this.$('.close'); }, getShowModalBtn: function() { return this.$('.showModalBtn'); } } // 模态框拖动 var dragModal = { 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') const dragInitX = e.pageX - this.innerX; const dragInitY = 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();
// 输入值控制内容大小功能 var funState = { 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', () => { const iptVal = this.ctrlBodySizeIpt.value; if (iptVal) this.dragBody.style.flex = iptVal; else alert('please input value'); }) } } funState.init();
// 关闭模态框 var closeState = { init: function () { commonState.getCloseBtn().addEventListener('click', () => { commonState.getDrag().style.display = 'none'; }) commonState.getShowModalBtn().addEventListener('click', () => { commonState.getDrag().style.display = 'flex'; }) } } closeState.init(); }
标签：模态,function,style,拖动,js,drag,commonState,dragInitX,null 来源： https://www.cnblogs.com/fanJoin/p/14981210.html