diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue index e0e0571..114cfb2 100644 --- a/src/components/ShowFile/ShowFile.vue +++ b/src/components/ShowFile/ShowFile.vue @@ -369,7 +369,6 @@ :style="{'width':'100%','max-height': clientHeight-45+'px','overflow':'auto'}">
import {mapGetters} from 'vuex' import {formatSize, formatTime} from '@/utils/number' +import {getElementToPageLeft, getElementToPageTop} from '@/utils/dom' import {suffix} from '@/utils/file-type' import Bus from '@/assets/js/bus' import api from '@/api/file-api' @@ -1046,16 +1047,10 @@ export default { const container = document.querySelector(".dashboard-container") let clientWidth = container.clientWidth this.clientHeight = document.documentElement.clientHeight - this.lessClientHeight - if(clientWidth > 1024){ - this.gridColumnNum = this.queryFileType === 'image' ? Math.round(clientWidth / 100 - 5) : Math.round(clientWidth / 100 - 4) + if (this.queryFileType === 'image') { + this.gridColumnNum = Math.round((clientWidth-10)/145) } else { - this.gridColumnNum = this.queryFileType === 'image' ? Math.round(clientWidth / 100 - 3) : Math.round(clientWidth / 100 - 2) - if(clientWidth < 768){ - this.gridColumnNum = 3 - } - if(clientWidth < 450){ - this.gridColumnNum = 2 - } + this.gridColumnNum = Math.round((clientWidth-10)/135) } if(clientWidth < 900){ this.showUpdateDateItem = false @@ -1086,7 +1081,6 @@ export default { let itemClassName = 'el-table__row' draw.onmousedown = null draw.onmousedown = function (e) { - console.log('draw', onmousedown) if (_this.fileListScrollTop > 0) { return } @@ -1105,24 +1099,32 @@ export default { if (evt.button !== 0) { return } + _this.dragElementList.forEach(element => { + _this.$refs.fileListTable.toggleRowSelection([{row: _this.fileList[element.rowIndex], selected: false}]) + }) + const drawOffsetTop = getElementToPageTop(draw) + const drawOffsetLeft = getElementToPageLeft(draw) let scrollTop = draw.scrollTop || draw.scrollTop let scrollLeft = draw.scrollLeft || draw.scrollLeft startX = evt.clientX + scrollLeft startY = evt.clientY + scrollTop - let div = document.createElement("div") - div.id = wId - div.className = "draw-rectangle" - div.style.left = startX + "px" - div.style.top = startY + "px" - div.style.position = 'fixed' - div.style.border = '1px dashed #2898ff' - div.style.width = '0px' - div.style.height = '0px' - div.style.left = '0px' - div.style.top = '0px' - div.style.overflow = 'hidden' - draw.appendChild(div) + let moveCount = 0 document.onmousemove = function (e) { + if (moveCount == 0){ + let div = document.createElement("div") + div.id = wId + div.className = "draw-rectangle" + div.style.left = startX + "px" + div.style.top = startY + "px" + div.style.position = 'fixed' + div.style.border = '1px dashed #2898ff' + div.style.width = '0px' + div.style.height = '0px' + div.style.left = '0px' + div.style.top = '0px' + div.style.overflow = 'hidden' + draw.appendChild(div) + } let evt = window.event || e let scrollTop = document.body.scrollTop || document.documentElement.scrollTop let scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft @@ -1130,10 +1132,13 @@ export default { retcTop = (startY - evt.clientY - scrollTop > 0 ? evt.clientY + scrollTop : startY) retcHeight = Math.abs(startY - evt.clientY - scrollTop) retcWidth = Math.abs(startX - evt.clientX - scrollLeft) + _this.drawFlag = true + if ((retcHeight + retcWidth) < 4) { + return + } const drawRectangle = $$(wId) - if (drawRectangle) { + if (drawRectangle && retcTop >= drawOffsetTop) { noScroll() - _this.drawFlag = true drawRectangle.style.left = retcLeft + 'px' drawRectangle.style.top = retcTop + 'px' drawRectangle.style.width = retcWidth + 'px' @@ -1145,6 +1150,7 @@ export default { drawSelect({x: retcLeft, y: retcTop, w: retcWidth, h: retcHeight}) } } + moveCount++ } document.onmouseup = function (e) { document.onmousemove = null; @@ -1285,7 +1291,13 @@ export default { } child.ondragstart = function (e) { - console.log('child.ondragstart') + if (_this.drawFlag) { + // _this.$refs.fileListTable.clearSelection() + // _this.$refs.fileListTable.toggleRowSelection([{row: this.fileList[e.path[0].rowIndex], selected: true}]) + e.preventDefault() + e.stopPropagation() + return + } if (_this.fileListScrollTop === 0) { let count = _this.selectRowData.length if (_this.selectRowData.length >= 99) { @@ -2588,7 +2600,6 @@ export default { if (this.rowContextData.isFolder) { this.$refs.directoryTree.append(this.rowContextData, to) } - if (operating === 'move') { // 移除列表 if (this.$refs.fileListTable.tableSelectData.length === 1) { @@ -2599,7 +2610,6 @@ export default { this.$refs.fileListTable.clearSelection()// 删除后清空之前选择的数据 this.$refs.fileListTable.tableSelectData = [] } - setTimeout(function () { copying.close() }, 1000) diff --git a/src/utils/dom.js b/src/utils/dom.js new file mode 100644 index 0000000..8b0adf1 --- /dev/null +++ b/src/utils/dom.js @@ -0,0 +1,20 @@ +// 获取DOM元素到页面顶部的距离 +export function getElementToPageTop(el) { + if (el.className.indexOf('parent-grid-item') > -1) { + return el.offsetTop + } + if (el.parentElement) { + return getElementToPageTop(el.parentElement) + el.offsetTop + } + return el.offsetTop +} +// 获取DOM元素到页面左边的距离 +export function getElementToPageLeft(el) { + if (el.className.indexOf('parent-grid-item') > -1) { + return el.offsetLeft + } + if (el.offsetParent) { + return getElementToPageLeft(el.offsetParent) + el.offsetLeft + } + return el.offsetLeft +} diff --git a/src/views/home/mobile/index.vue b/src/views/home/mobile/index.vue index ab5baef..05b80ca 100644 --- a/src/views/home/mobile/index.vue +++ b/src/views/home/mobile/index.vue @@ -274,6 +274,7 @@ import {mapGetters} from 'vuex' import {formatSize, formatTime} from '@/utils/number' +import {getElementToPageLeft, getElementToPageTop} from '@/utils/dom' import api from '@/api/file-api' import IconFile from "../../../components/Icon/IconFile"; import Bus from '@/assets/js/bus' @@ -484,14 +485,14 @@ export default { this.preliminaryRowData(row) // 长按选择的数据 - const offsetTop = this.getElementToPageTop(target) - row.scrollY + const offsetTop = getElementToPageTop(target) - row.scrollY const e = {} if ((offsetTop + (target.offsetHeight / 2)) > document.body.offsetHeight / 2) { e.pageX = touchClientX - e.pageY = this.getElementToPageTop(target) - this.menus.length * 47 + 5 + e.pageY = getElementToPageTop(target) - this.menus.length * 47 + 5 } else { e.pageX = touchClientX - e.pageY = this.getElementToPageTop(target) + target.offsetHeight + 5 + e.pageY = getElementToPageTop(target) + target.offsetHeight + 5 } this.$refs.contextShow.showMenu(e) }, @@ -720,45 +721,25 @@ export default { longPressDisplayLayer(item, offsetParent, touchClientX) { const background = this.selectIndexList.includes(this.rowContextData.index) ? '#90c2fcb5' : '' this.overlayContentClass = { - 'top': (this.getElementToPageTop(offsetParent) - item.scrollY) + 'px', + 'top': (getElementToPageTop(offsetParent) - item.scrollY) + 'px', 'height': offsetParent.offsetHeight + 'px', 'width': offsetParent.offsetWidth + 'px', - 'left': this.getElementToPageLeft(offsetParent) + 'px', + 'left': getElementToPageLeft(offsetParent) + 'px', 'border-radius': '0px', 'background': background } setTimeout(() => { this.overlayContentClass = { - 'top': (this.getElementToPageTop(offsetParent) - item.scrollY) + 'px', + 'top': (getElementToPageTop(offsetParent) - item.scrollY) + 'px', 'height': offsetParent.offsetHeight + 'px', 'width': (offsetParent.offsetWidth - (this.grid ? 0 : 10)) + 'px', - 'left': (this.getElementToPageLeft(offsetParent) + (this.grid ? 0 : 5)) + 'px', + 'left': (getElementToPageLeft(offsetParent) + (this.grid ? 0 : 5)) + 'px', 'border-radius': '20px', 'background': background } }, 0) this.rowContextmenu(item, offsetParent, touchClientX) }, - // 获取DOM元素到页面顶部的距离 - getElementToPageTop(el) { - if (el.className.indexOf('parent-grid-item') > -1) { - return el.offsetTop - } - if (el.parentElement) { - return this.getElementToPageTop(el.parentElement) + el.offsetTop - } - return el.offsetTop - }, - // 获取DOM元素到页面左边的距离 - getElementToPageLeft(el) { - if (el.className.indexOf('parent-grid-item') > -1) { - return el.offsetLeft - } - if (el.offsetParent) { - return this.getElementToPageLeft(el.offsetParent) + el.offsetLeft - } - return el.offsetLeft - }, // 浏览器的返回事件 goBack() { if (this.pathList.length <= 1) {