| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | /**
|
|---|
| | | * v-dialogDrag å¼¹çªææ½
|
|---|
| | | * Copyright (c) 2019 ruoyi
|
|---|
| | | */
|
|---|
| | |
|
|---|
| | | export default {
|
|---|
| | | bind(el, binding, vnode, oldVnode) {
|
|---|
| | | const value = binding.value
|
|---|
| | | if (value == false) return
|
|---|
| | | // è·åææ½å
容头é¨
|
|---|
| | | const dialogHeaderEl = el.querySelector('.el-dialog__header');
|
|---|
| | | const dragDom = el.querySelector('.el-dialog');
|
|---|
| | | dialogHeaderEl.style.cursor = 'move';
|
|---|
| | | // è·ååæå±æ§ ie domå
ç´ .currentStyle ç«çè°·æ window.getComputedStyle(domå
ç´ , null);
|
|---|
| | | const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
|
|---|
| | | dragDom.style.position = 'absolute';
|
|---|
| | | dragDom.style.marginTop = 0;
|
|---|
| | | let width = dragDom.style.width;
|
|---|
| | | if (width.includes('%')) {
|
|---|
| | | width = +document.body.clientWidth * (+width.replace(/\%/g, '') / 100);
|
|---|
| | | } else {
|
|---|
| | | width = +width.replace(/\px/g, '');
|
|---|
| | | }
|
|---|
| | | dragDom.style.left = `${(document.body.clientWidth - width) / 2}px`;
|
|---|
| | | // é¼ æ æä¸äºä»¶
|
|---|
| | | dialogHeaderEl.onmousedown = (e) => {
|
|---|
| | | // é¼ æ æä¸ï¼è®¡ç®å½åå
ç´ è·ç¦»å¯è§åºçè·ç¦» (é¼ æ ç¹å»ä½ç½®è·ç¦»å¯è§çªå£çè·ç¦»)
|
|---|
| | | const disX = e.clientX - dialogHeaderEl.offsetLeft;
|
|---|
| | | const disY = e.clientY - dialogHeaderEl.offsetTop;
|
|---|
| | |
|
|---|
| | | // è·åå°çå¼å¸¦px æ£åå¹é
æ¿æ¢
|
|---|
| | | let styL, styT;
|
|---|
| | |
|
|---|
| | | // 注æå¨ieä¸ ç¬¬ä¸æ¬¡è·åå°çå¼ä¸ºç»ä»¶èªå¸¦50% 移å¨ä¹åèµå¼ä¸ºpx
|
|---|
| | | if (sty.left.includes('%')) {
|
|---|
| | | styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
|
|---|
| | | styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
|
|---|
| | | } else {
|
|---|
| | | styL = +sty.left.replace(/\px/g, '');
|
|---|
| | | styT = +sty.top.replace(/\px/g, '');
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | // é¼ æ ææ½äºä»¶
|
|---|
| | | document.onmousemove = function (e) {
|
|---|
| | | // éè¿äºä»¶å§æï¼è®¡ç®ç§»å¨çè·ç¦» ï¼å¼å§ææ½è³ç»æææ½çè·ç¦»ï¼
|
|---|
| | | const l = e.clientX - disX;
|
|---|
| | | const t = e.clientY - disY;
|
|---|
| | |
|
|---|
| | | let finallyL = l + styL
|
|---|
| | | let finallyT = t + styT
|
|---|
| | |
|
|---|
| | | // 移å¨å½åå
ç´
|
|---|
| | | dragDom.style.left = `${finallyL}px`;
|
|---|
| | | dragDom.style.top = `${finallyT}px`;
|
|---|
| | |
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | document.onmouseup = function (e) {
|
|---|
| | | document.onmousemove = null;
|
|---|
| | | document.onmouseup = null;
|
|---|
| | | };
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }; |
|---|
