bd4rr/vue-naive-admin
1
0
Fork 0
mirror of https://github.com/zclzone/vue-naive-admin.git synced 2025-05-01 14:49:00 +08:00
Code

fix: 修复MeModal拖拽导致不能拖选文本问题，close#74

Browse Source
This commit is contained in:
zclzone 2024-03-25 22:42:01 +08:00
parent 2599ea2060
commit c754d02dc0
1 changed files with 9 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/me/modal/utils.js
View File

@ -13,28 +13,16 @@ function getCss(element, key) {
: window.getComputedStyle(element, null)[key] : window.getComputedStyle(element, null)[key]
} }
const params = { // 初始化拖拽
export function initDrag(bar, box) {
if (!bar || !box) return
const params = {
left: 0, left: 0,
top: 0, top: 0,
currentX: 0, currentX: 0,
currentY: 0, currentY: 0,
flag: false, flag: false,
} }
// 初始化拖拽
export function initDrag(bar, box) {
if (!bar || !box) return
const screenWidth = document.body.clientWidth // 页面宽度
const screenHeight = document.documentElement.clientHeight // 页面可见区域高度
const dragDomWidth = box.offsetWidth // 盒子宽度
const dragDomHeight = box.offsetHeight // 盒子高度
const minDomLeft = box.offsetLeft // 盒子相对于父元素的左偏移量
const minDomTop = box.offsetTop // 盒子相对于父元素的上偏移量
const maxDragDomLeft = screenWidth - minDomLeft - dragDomWidth // 盒子在水平方向上可拖拽的最大距离
const maxDragDomTop = screenHeight - minDomTop - dragDomHeight // 盒子在垂直方向上可拖拽的最大距离
if (getCss(box, 'left') !== 'auto') { if (getCss(box, 'left') !== 'auto') {
params.left = getCss(box, 'left') params.left = getCss(box, 'left')
@ -45,7 +33,6 @@ export function initDrag(bar, box) {
// 设置触发拖动元素的鼠标样式为移动图标 // 设置触发拖动元素的鼠标样式为移动图标
bar.style.cursor = 'move' bar.style.cursor = 'move'
// 鼠标按下事件处理函数 // 鼠标按下事件处理函数
bar.onmousedown = function (e) { bar.onmousedown = function (e) {
params.flag = true // 设置拖拽标志为true params.flag = true // 设置拖拽标志为true
@ -63,6 +50,8 @@ export function initDrag(bar, box) {
} }
} }
document.onmousemove = function (e) { document.onmousemove = function (e) {
if (e.target !== bar && !params.flag) return
e.preventDefault() // 阻止默认事件 e.preventDefault() // 阻止默认事件
// 如果拖拽标志为true // 如果拖拽标志为true
if (params.flag) { if (params.flag) {
@ -74,19 +63,6 @@ export function initDrag(bar, box) {
let left = parseInt(params.left) + disX // 盒子元素的新left值 let left = parseInt(params.left) + disX // 盒子元素的新left值
let top = parseInt(params.top) + disY // 盒子元素的新top值 let top = parseInt(params.top) + disY // 盒子元素的新top值
// 拖出屏幕边缘
if (-left > minDomLeft) {
left = -minDomLeft
} else if (left > maxDragDomLeft) {
left = maxDragDomLeft
}
if (-top > minDomTop) {
top = -minDomTop
} else if (top > maxDragDomTop) {
top = maxDragDomTop
}
box.style.left = left + 'px' box.style.left = left + 'px'
box.style.top = top + 'px' box.style.top = top + 'px'
} }