aDragModalHook：useDragModal #5501

pinecone-squirrel · 2023-12-22T08:59:24Z

This function solves the problem (这个功能解决的问题)

Realization of modal drag

Expected API (期望的 API)

useDragModal

pinecone-squirrel · 2023-12-22T09:02:21Z

`/**
*模态框拖动Hook

@param {HTMLElement} draggableEl - 要拖动的元素。
@param {string} [childrenSelectors='.n-card-header'] - 用于查找要应用拖动事件的子元素的选择器。
*/
export const useDragModal = (draggableEl, childrenSelectors = '.n-card-header') => {
const targetEl = draggableEl.querySelector(childrenSelectors)
targetEl.style.cursor = 'move'
mousedown(targetEl, draggableEl)
mouseleave(targetEl)
mouseup(targetEl)
}
const mousedown = (targetEl, draggableEl) => {
targetEl.onmousedown = event => {
const viewportWidth = window.innerWidth || document.documentElement.clientWidth
const viewportHeight = window.innerHeight || document.documentElement.clientHeight
const { width, height, x: minMoveX, y: minMoveY } = draggableEl.getBoundingClientRect()
const maxMoveX = viewportWidth - width - minMoveX
const maxMoveY = viewportHeight - height - minMoveY
const { clientX: originX, clientY: originY } = event
let { left, top } = draggableEl.style
// getComputedStyle
const styleLeft = left?.replace('px', '') ?? 0
const styleTop = top.replace('px', '') ?? 0
document.onmousemove = e => {
const { clientX, clientY } = e
let moveX = clientX - originX
let moveY = clientY - originY
if (moveX > maxMoveX) {
moveX = maxMoveX
} else if (-moveX > minMoveX) {
moveX = -minMoveX
}
if (moveY > maxMoveY) {
moveY = maxMoveY
} else if (-moveY > minMoveY) {
moveY = -minMoveY
}
draggableEl.style.cssText += ;left:${+styleLeft + moveX}px;top:${+styleTop + moveY}px;
}
}
}
const mouseup = () => {
document.onmouseup = () => {
document.onmousemove = null
}
}
const mouseleave = targetEl => {
targetEl.onmouseleave = () => (document.onmousemove = null)
}
`

I should have implemented it, but his closing animation is less than perfect

Usage

OrbisK · 2024-01-08T15:39:06Z

is you request like #5554 ?

pinecone-squirrel · 2024-01-09T00:46:45Z

is you request like #5554 ?

yes

But I've already done that.

But I hope the officials will support it

liuyang0826 · 2024-01-12T06:14:15Z

export interface Options {
  /**
   * 禁用拖拽的类名
   * @default drag-disabled
   */
  disabledClass?: string
  /**
   * 最大搜索深度
   * @default 3
   */
  maxDepth?: number
}

export function modalDraggable(options?: Options) {
  const { disabledClass = 'drag-disabled', maxDepth = 3 } = options ?? {}

  const findModalHeader = (target: HTMLElement) => {
    let depth = 0

    while (target && depth < maxDepth) {
      if (target.classList.contains('n-card-header__close')) return

      if (target.classList.contains('n-card-header') && target.parentElement?.classList.contains('n-modal')) {
        if (target.parentElement?.classList.contains(disabledClass)) return

        return target
      }

      target = target.parentElement as HTMLElement
      depth += 1
    }
  }

  const handleMousedown = (originEvent: MouseEvent) => {
    const header = findModalHeader(originEvent.target as HTMLElement)
    if (!header) return
    const targetEl = header.parentElement as HTMLElement

    const { innerWidth, innerHeight } = window
    const userSelect = document.body.style.userSelect
    document.body.style.userSelect = 'none'

    const originLeft = parseFloat(targetEl.style.left) || 0
    const originTop = parseFloat(targetEl.style.top) || 0

    const handleMousemove = (moveEvent: MouseEvent) => {
      const left = originLeft + Math.min(innerWidth, Math.max(0, moveEvent.clientX)) - originEvent.clientX
      const top = originTop + Math.min(innerHeight, Math.max(0, moveEvent.clientY)) - originEvent.clientY
      targetEl.style.left = `${left}px`
      targetEl.style.top = `${top}px`
    }

    const handleMouseup = () => {
      document.body.style.userSelect = userSelect
      document.removeEventListener('mousemove', handleMousemove)
      document.removeEventListener('mouseup', handleMouseup)
    }

    document.addEventListener('mousemove', handleMousemove)
    document.addEventListener('mouseup', handleMouseup)
  }

  document.addEventListener('mousedown', handleMousedown)

  return () => document.removeEventListener('mousedown', handleMousedown)
}

我目前的做法，把这个方法在main.js里面执行一下，所有的modal都可以拖动，需要禁止的地方加drag-disabled类名

fxjs · 2024-03-07T12:41:01Z

`/** *模态框拖动Hook

@param {HTMLElement} draggableEl - 要拖动的元素。

@param {string} [childrenSelectors='.n-card-header'] - 用于查找要应用拖动事件的子元素的选择器。
*/
export const useDragModal = (draggableEl, childrenSelectors = '.n-card-header') => {
const targetEl = draggableEl.querySelector(childrenSelectors)
targetEl.style.cursor = 'move'
mousedown(targetEl, draggableEl)
mouseleave(targetEl)
mouseup(targetEl)
}
const mousedown = (targetEl, draggableEl) => {
targetEl.onmousedown = event => {
const viewportWidth = window.innerWidth || document.documentElement.clientWidth
const viewportHeight = window.innerHeight || document.documentElement.clientHeight
const { width, height, x: minMoveX, y: minMoveY } = draggableEl.getBoundingClientRect()
const maxMoveX = viewportWidth - width - minMoveX
const maxMoveY = viewportHeight - height - minMoveY
const { clientX: originX, clientY: originY } = event
let { left, top } = draggableEl.style
// getComputedStyle
const styleLeft = left?.replace('px', '') ?? 0
const styleTop = top.replace('px', '') ?? 0
document.onmousemove = e => {
const { clientX, clientY } = e
let moveX = clientX - originX
let moveY = clientY - originY
if (moveX > maxMoveX) {
moveX = maxMoveX
} else if (-moveX > minMoveX) {
moveX = -minMoveX
}
if (moveY > maxMoveY) {
moveY = maxMoveY
} else if (-moveY > minMoveY) {
moveY = -minMoveY
}
draggableEl.style.cssText += ;left:${+styleLeft + moveX}px;top:${+styleTop + moveY}px;
}
}
}
const mouseup = () => {
document.onmouseup = () => {
document.onmousemove = null
}
}
const mouseleave = targetEl => {
targetEl.onmouseleave = () => (document.onmousemove = null)
}
`

I should have implemented it, but his closing animation is less than perfect

Usage

优化鼠标移出标题后窗口不跟随问题：

export const useDragModal = (draggableEl: HTMLElement, childrenSelectors = '.n-card-header') => {
  const targetEl = draggableEl.querySelector(childrenSelectors) as HTMLElement;
  if (!targetEl) {
    return;
  }
  targetEl.style.cursor = 'move';
  targetEl.style.userSelect = 'none';
  mousedown(targetEl as HTMLElement, draggableEl);
  mouseup();
};

const mousedown = (targetEl: HTMLElement, draggableEl: HTMLElement) => {
  targetEl.onmousedown = (event: MouseEvent) => {
    const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
    const { width, height, x: minMoveX, y: minMoveY } = draggableEl.getBoundingClientRect();
    const maxMoveX = viewportWidth - width - minMoveX;
    const maxMoveY = viewportHeight - height - minMoveY;
    const { clientX: originX, clientY: originY } = event;
    const { left, top } = draggableEl.style;
    const styleLeft = left?.replace('px', '') ?? 0;
    const styleTop = top.replace('px', '') ?? 0;

    document.onmousemove = (e: MouseEvent) => {
      const { clientX, clientY } = e;
      let moveX = clientX - originX;
      let moveY = clientY - originY;
      if (moveX > maxMoveX) {
        moveX = maxMoveX;
      } else if (-moveX > minMoveX) {
        moveX = -minMoveX;
      }
      if (moveY > maxMoveY) {
        moveY = maxMoveY;
      } else if (-moveY > minMoveY) {
        moveY = -minMoveY;
      }
      draggableEl.style.cssText += `;left:${+styleLeft + moveX}px;top:${+styleTop + moveY}px`;
    };
  };
};

const mouseup = () => {
  document.onmouseup = () => {
    document.onmousemove = null;
  };
};

pinecone-squirrel · 2024-03-11T01:26:23Z

`/** *模态框拖动Hook

@param {HTMLElement} draggableEl - 要拖动的元素。

@param {string} [childrenSelectors='.n-card-header'] - 用于查找要应用拖动事件的子元素的选择器。
*/
export const useDragModal = (draggableEl, childrenSelectors = '.n-card-header') => {
const targetEl = draggableEl.querySelector(childrenSelectors)
targetEl.style.cursor = 'move'
mousedown(targetEl, draggableEl)
mouseleave(targetEl)
mouseup(targetEl)
}
const mousedown = (targetEl, draggableEl) => {
targetEl.onmousedown = event => {
const viewportWidth = window.innerWidth || document.documentElement.clientWidth
const viewportHeight = window.innerHeight || document.documentElement.clientHeight
const { width, height, x: minMoveX, y: minMoveY } = draggableEl.getBoundingClientRect()
const maxMoveX = viewportWidth - width - minMoveX
const maxMoveY = viewportHeight - height - minMoveY
const { clientX: originX, clientY: originY } = event
let { left, top } = draggableEl.style
// getComputedStyle
const styleLeft = left?.replace('px', '') ?? 0
const styleTop = top.replace('px', '') ?? 0
document.onmousemove = e => {
const { clientX, clientY } = e
let moveX = clientX - originX
let moveY = clientY - originY
if (moveX > maxMoveX) {
moveX = maxMoveX
} else if (-moveX > minMoveX) {
moveX = -minMoveX
}
if (moveY > maxMoveY) {
moveY = maxMoveY
} else if (-moveY > minMoveY) {
moveY = -minMoveY
}
draggableEl.style.cssText += ;left:${+styleLeft + moveX}px;top:${+styleTop + moveY}px;
}
}
}
const mouseup = () => {
document.onmouseup = () => {
document.onmousemove = null
}
}
const mouseleave = targetEl => {
targetEl.onmouseleave = () => (document.onmousemove = null)
}
`

I should have implemented it, but his closing animation is less than perfect
Usage

优化鼠标移出标题后窗口不跟随问题：
export const useDragModal = (draggableEl: HTMLElement, childrenSelectors = '.n-card-header') => {
  const targetEl = draggableEl.querySelector(childrenSelectors) as HTMLElement;
  if (!targetEl) {
    return;
  }
  targetEl.style.cursor = 'move';
  targetEl.style.userSelect = 'none';
  mousedown(targetEl as HTMLElement, draggableEl);
  mouseup();
};

const mousedown = (targetEl: HTMLElement, draggableEl: HTMLElement) => {
  targetEl.onmousedown = (event: MouseEvent) => {
    const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
    const { width, height, x: minMoveX, y: minMoveY } = draggableEl.getBoundingClientRect();
    const maxMoveX = viewportWidth - width - minMoveX;
    const maxMoveY = viewportHeight - height - minMoveY;
    const { clientX: originX, clientY: originY } = event;
    const { left, top } = draggableEl.style;
    const styleLeft = left?.replace('px', '') ?? 0;
    const styleTop = top.replace('px', '') ?? 0;

    document.onmousemove = (e: MouseEvent) => {
      const { clientX, clientY } = e;
      let moveX = clientX - originX;
      let moveY = clientY - originY;
      if (moveX > maxMoveX) {
        moveX = maxMoveX;
      } else if (-moveX > minMoveX) {
        moveX = -minMoveX;
      }
      if (moveY > maxMoveY) {
        moveY = maxMoveY;
      } else if (-moveY > minMoveY) {
        moveY = -minMoveY;
      }
      draggableEl.style.cssText += `;left:${+styleLeft + moveX}px;top:${+styleTop + moveY}px`;
    };
  };
};

const mouseup = () => {
  document.onmouseup = () => {
    document.onmousemove = null;
  };
};

我特意让鼠标移出就拖动不了的，哈哈哈

github-actions bot added the feature request New feature or request label Dec 22, 2023

OrbisK added the needs-more-info label Jan 8, 2024

pinecone-squirrel mentioned this issue Mar 1, 2024

希望Modal组件能够增加一个可拖动的功能 #5736

Open

3 tasks

NHZEX mentioned this issue Jun 19, 2024

NaiveUi 增强方案备忘录 NHZEX/nxAdmin-soybean-admin#2

Open

pinecone-squirrel mentioned this issue Jul 19, 2024

一大波新功能请求，希望作者参考 #6168

Open

20 tasks

Azir-11 mentioned this issue Aug 12, 2024

[功能]: n-modal组件拖拽、全屏功能有计划吗？ soybeanjs/soybean-admin#596

Closed

Zheng-Changfu linked a pull request Nov 30, 2024 that will close this issue

feat/modal 弹窗可拖拽 #6583

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

aDragModalHook：useDragModal #5501

aDragModalHook：useDragModal #5501

pinecone-squirrel commented Dec 22, 2023

pinecone-squirrel commented Dec 22, 2023

OrbisK commented Jan 8, 2024

pinecone-squirrel commented Jan 9, 2024

liuyang0826 commented Jan 12, 2024 •

edited

Loading

fxjs commented Mar 7, 2024

pinecone-squirrel commented Mar 11, 2024

aDragModalHook：useDragModal #5501

aDragModalHook：useDragModal #5501

Comments

pinecone-squirrel commented Dec 22, 2023

This function solves the problem (这个功能解决的问题)

Expected API (期望的 API)

pinecone-squirrel commented Dec 22, 2023

OrbisK commented Jan 8, 2024

pinecone-squirrel commented Jan 9, 2024

liuyang0826 commented Jan 12, 2024 • edited Loading

fxjs commented Mar 7, 2024

pinecone-squirrel commented Mar 11, 2024

liuyang0826 commented Jan 12, 2024 •

edited

Loading