|
@@ -166,8 +166,8 @@ export default function useDrag(
|
|
|
transformY: (window.innerHeight - 640) / 2,
|
|
|
defaultWidth: initSize?.width || 400,
|
|
|
defaultHeight: initSize?.height || 640,
|
|
|
- height: initSize?.height || 640,
|
|
|
- width: initSize?.width || 400
|
|
|
+ height: 0,
|
|
|
+ width: 0
|
|
|
});
|
|
|
const dragStyles = reactive({
|
|
|
maxHeight: getSizeToUnit(baseSize.maxHeight),
|
|
@@ -175,76 +175,68 @@ export default function useDrag(
|
|
|
minHeight: getSizeToUnit(baseSize.minHeight)
|
|
|
});
|
|
|
|
|
|
- nextTick(() => {
|
|
|
- const layoutTopHeight =
|
|
|
- document.querySelector('.layoutTop')?.clientHeight || 0;
|
|
|
- baseSize.layoutTopHeight = Math.ceil(layoutTopHeight);
|
|
|
- baseSize.windowHeight = window.innerHeight - layoutTopHeight;
|
|
|
- baseSize.maxHeight = window.innerHeight - layoutTopHeight;
|
|
|
- // 判断窗口的高度与默认高度比例
|
|
|
- if (baseSize.defaultHeight >= baseSize.maxHeight) {
|
|
|
- baseSize.defaultHeight = baseSize.maxHeight - 100;
|
|
|
- }
|
|
|
+ watch(dragShow, () => {
|
|
|
+ if (dragShow.value) {
|
|
|
+ // 初始化pos值
|
|
|
+ // initPos();
|
|
|
+ window.addEventListener('resize', refreshPos);
|
|
|
+
|
|
|
+ nextTick(() => {
|
|
|
+ const layoutTopHeight =
|
|
|
+ document.querySelector('.layoutTop')?.clientHeight || 0;
|
|
|
+ baseSize.layoutTopHeight = Math.ceil(layoutTopHeight);
|
|
|
+ baseSize.windowHeight = window.innerHeight - layoutTopHeight;
|
|
|
+ baseSize.maxHeight = window.innerHeight - layoutTopHeight;
|
|
|
+ // 判断窗口的高度与默认高度比例
|
|
|
+ if (baseSize.defaultHeight >= baseSize.maxHeight) {
|
|
|
+ baseSize.defaultHeight = baseSize.maxHeight - 100;
|
|
|
+ }
|
|
|
+ if (baseSize.winHeight >= baseSize.maxHeight) {
|
|
|
+ baseSize.winHeight = baseSize.maxHeight - 100;
|
|
|
+ }
|
|
|
|
|
|
- const translateY = (baseSize.windowHeight - baseSize.defaultHeight) / 2;
|
|
|
- baseSize.transformX =
|
|
|
- baseSize.windowWidth - baseSize.defaultWidth - initPos.right;
|
|
|
- baseSize.transformY = translateY;
|
|
|
- dragStyles.maxHeight = getSizeToUnit(baseSize.maxHeight);
|
|
|
+ const translateY = (baseSize.windowHeight - baseSize.defaultHeight) / 2;
|
|
|
+ baseSize.transformX =
|
|
|
+ baseSize.windowWidth - baseSize.defaultWidth - initPos.right;
|
|
|
+ baseSize.transformY = translateY;
|
|
|
+ dragStyles.maxHeight = getSizeToUnit(baseSize.maxHeight);
|
|
|
|
|
|
- // 初始化定位
|
|
|
- if (initSize?.defaultPosition === 'center') {
|
|
|
- // alert(initSize.width)
|
|
|
- const transformX = (window.innerWidth - baseSize.defaultWidth) / 2;
|
|
|
- const transformY = (baseSize.windowHeight - baseSize.defaultHeight) / 2;
|
|
|
- baseSize.transformX = transformX;
|
|
|
- baseSize.transformY = transformY;
|
|
|
- }
|
|
|
+ baseSize.width = baseSize.defaultWidth;
|
|
|
+ baseSize.height = baseSize.defaultHeight;
|
|
|
|
|
|
- const boxClassDom = document.querySelector(`.${boxClass}`) as HTMLElement;
|
|
|
- if (!boxClassDom) {
|
|
|
- return;
|
|
|
- }
|
|
|
- addReSizeDom(boxClassDom, baseSize.resizeDirection);
|
|
|
+ // 初始化定位
|
|
|
+ if (initSize?.defaultPosition === 'center') {
|
|
|
+ // alert(initSize.width)
|
|
|
+ const transformX = (window.innerWidth - baseSize.defaultWidth) / 2;
|
|
|
+ const transformY =
|
|
|
+ (baseSize.windowHeight - baseSize.defaultHeight) / 2;
|
|
|
+ baseSize.transformX = transformX;
|
|
|
+ baseSize.transformY = transformY;
|
|
|
+ }
|
|
|
|
|
|
- classList.map((className: string) => {
|
|
|
- const classDom = document.querySelector(`.${className}`) as HTMLElement;
|
|
|
- if (classDom) {
|
|
|
- classDom.style.cursor = 'move';
|
|
|
- drag(classDom, boxClassDom, baseSize);
|
|
|
- }
|
|
|
- });
|
|
|
+ const boxClassDom = document.querySelector(
|
|
|
+ `.${boxClass}`
|
|
|
+ ) as HTMLElement;
|
|
|
+ if (!boxClassDom) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ addReSizeDom(boxClassDom, baseSize.resizeDirection);
|
|
|
+
|
|
|
+ classList.map((className: string) => {
|
|
|
+ const classDom = document.querySelector(
|
|
|
+ `.${className}`
|
|
|
+ ) as HTMLElement;
|
|
|
+ if (classDom) {
|
|
|
+ classDom.style.cursor = 'move';
|
|
|
+ drag(classDom, boxClassDom, baseSize);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ window.removeEventListener('resize', refreshPos);
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
- // watch(dragShow, () => {
|
|
|
- // if (dragShow.value) {
|
|
|
- // // 初始化pos值
|
|
|
- // // initPos();
|
|
|
- // window.addEventListener('resize', refreshPos);
|
|
|
- // // nextTick(() => {
|
|
|
- // // const boxClassDom = document.querySelector(
|
|
|
- // // `.${boxClass}`
|
|
|
- // // ) as HTMLElement;
|
|
|
- // // if (!boxClassDom) {
|
|
|
- // // return;
|
|
|
- // // }
|
|
|
- // // console.log(boxClassDom, 'boxClassDom');
|
|
|
- // // classList.map((className: string) => {
|
|
|
- // // const classDom = document.querySelector(
|
|
|
- // // `.${className}`
|
|
|
- // // ) as HTMLElement;
|
|
|
- // // if (classDom) {
|
|
|
- // // classDom.style.cursor = 'move';
|
|
|
- // // drag(classDom, boxClassDom, baseSize);
|
|
|
- // // }
|
|
|
- // // });
|
|
|
- // // });
|
|
|
-
|
|
|
- // } else {
|
|
|
- // window.removeEventListener('resize', refreshPos);
|
|
|
- // }
|
|
|
- // });
|
|
|
-
|
|
|
/**
|
|
|
* 添加功能放大缩小操作DOM
|
|
|
* @param parentElement {添加拖动父级元素}
|
|
@@ -373,28 +365,6 @@ export default function useDrag(
|
|
|
}
|
|
|
|
|
|
function refreshPos() {
|
|
|
- // if (pos.value.left === -1 && pos.value.top === -1) {
|
|
|
- // return;
|
|
|
- // }
|
|
|
- // const boxClassDom = document.querySelector(`.${boxClass}`) as HTMLElement;
|
|
|
- // if (!boxClassDom) return;
|
|
|
- // const parentElementRect = boxClassDom.getBoundingClientRect();
|
|
|
- // const clientWidth = document.documentElement.clientWidth;
|
|
|
- // const clientHeight = document.documentElement.clientHeight;
|
|
|
- // const { top, left } = pos.value;
|
|
|
- // const maxLeft = clientWidth - parentElementRect.width;
|
|
|
- // const maxTop = clientHeight - parentElementRect.height;
|
|
|
- // let moveX = left;
|
|
|
- // let moveY = top;
|
|
|
- // const minLeft = 0;
|
|
|
- // const minTop = 0;
|
|
|
- // moveX = moveX < minLeft ? minLeft : moveX > maxLeft ? maxLeft : moveX;
|
|
|
- // moveY = moveY < minTop ? minTop : moveY > maxTop ? maxTop : moveY;
|
|
|
- // pos.value = {
|
|
|
- // top: moveY,
|
|
|
- // left: moveX
|
|
|
- // };
|
|
|
-
|
|
|
onReset();
|
|
|
}
|
|
|
|