diff --git a/src/assets/img/arrow1_left.png b/src/assets/img/arrow1_left.png index b3ebc5c..a809a3d 100644 Binary files a/src/assets/img/arrow1_left.png and b/src/assets/img/arrow1_left.png differ diff --git a/src/components/ShowFile/SelectFile.vue b/src/components/ShowFile/SelectFile.vue index 030f743..42b1334 100644 --- a/src/components/ShowFile/SelectFile.vue +++ b/src/components/ShowFile/SelectFile.vue @@ -90,8 +90,8 @@ export default { >>>.el-dialog__footer { position: absolute; width: 100%; - bottom: 0px; - padding: 0px 20px 20px; + bottom: 0; + padding: 0 20px 20px; background: linear-gradient(rgba(255,255,255,0), #fff); } } diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue index 9eb6f7f..ae2fa63 100644 --- a/src/components/ShowFile/ShowFile.vue +++ b/src/components/ShowFile/ShowFile.vue @@ -362,13 +362,13 @@
- - -
+ +
1个文件
+ -
- document +
+
@@ -1197,6 +1197,8 @@ export default { let draw = document.getElementById('v-draw-rectangle') let rows = 0//行数 + let drawOffsetLeft = getElementToPageLeft(draw) + let firstOver = 0 // 是否刚开始拖动 let moveTitle = '' setTimeout(function () { @@ -1212,11 +1214,8 @@ export default { } // 为画矩形选取准备数据 let pos = getObjPos(child) - pos.w = child.offsetWidth - pos.h = child.offsetHeight - child.w = child.offsetWidth - child.h = child.offsetWidth + child.h = child.offsetHeight child.x = pos.x child.y = pos.y pos.rowIndex = child.rowIndex @@ -1276,6 +1275,7 @@ export default { dragIndex = -1 } } + console.log(throughRow) return throughRow } else { if (elPath[0].tagName === 'TD') { @@ -1327,13 +1327,12 @@ export default { dragingDiv.classList.add('dragingDiv') dragingDiv.style.transition = 'all 0.3s' dragingDiv.style.zIndex = -1 - dragingDiv.style.positon = 'absolute' - dragingDiv.style.width = element.offsetWidth + 'px' - dragingDiv.style.height = element.offsetHeight + 'px' - dragingDiv.rowIndex = rowIndex + dragingDiv.style.position = 'absolute' const pos = _this.dragElementList[rowIndex] + dragingDiv.style.width = pos.w + 'px' + dragingDiv.style.height = pos.h + 'px' dragingDiv.style.top = pos.y - pos.h/2 + 10 + 'px' - dragingDiv.style.left = pos.x - pos.w/2 + 6 + 'px' + dragingDiv.style.left = pos.x - drawOffsetLeft + 'px' dragingDiv.original = {top: dragingDiv.style.top, left: dragingDiv.style.left} if (index === 0){ let numberFilesCopy = document.getElementById("numberFiles").cloneNode(true) @@ -1341,7 +1340,6 @@ export default { numberFilesCopy.querySelector('.number').innerHTML = _this.selectRowData.length + '个文件' dragingDiv.appendChild(numberFilesCopy) } - draw.appendChild(dragingDiv) }) firstOver = 0 @@ -1358,7 +1356,7 @@ export default { draggedIndex = dragged.rowIndex // 只有选中的才能拖拽 _this.cellMouseIndex = -1 - dragged.style.cursor = 'not-allowed' + // dragged.style.cursor = 'not-allowed' dragBackCorlor = dragged.style.backgroundColor } } @@ -1381,9 +1379,14 @@ export default { dragged.style.cursor = 'copy' let numberFilesCopy = document.getElementById('numberFilesCopy') - console.log('numberFilesCopy', numberFilesCopy, numberFilesCopy.querySelector('.number'), numberFilesCopy.querySelector('.operate')) + numberFilesCopy.style.backgroundColor = '#40a9ffc9' numberFilesCopy.querySelector('.number').style.display = 'none' - // numberFilesCopy.querySelector('.targer').style.display = 'block' + numberFilesCopy.querySelector('.icon').style.display = 'inline' + numberFilesCopy.querySelector('.operate').style.display = 'inline' + let targetFolder = numberFilesCopy.querySelector('.target .folder') + targetFolder.style.display = 'inline' + targetFolder.innerHTML = _this.fileList[throughRow.rowIndex].name + dragEnterBackCorlor = throughRow.style.backgroundColor throughRow.style.backgroundColor = '#9fcdfc99' } @@ -1394,12 +1397,12 @@ export default { } container.ondragover = function (e) { - // console.log('draw.ondragover') _this.selectRowData.forEach((row,index) => { const drawRectangle = document.getElementById('dragingDiv'+row.index) if (drawRectangle) { - drawRectangle.style.left = e.clientX - 50 + index*3 + 'px' + drawRectangle.style.left = e.clientX - drawOffsetLeft + index*3 + 'px' drawRectangle.style.top = e.clientY - 50 + index*3 + 'px' + console.log(drawRectangle.style.top) if (firstOver === 0){ drawRectangle.style.zIndex = 999 setTimeout(()=>{ @@ -1473,6 +1476,15 @@ export default { } } dragged.style.cursor = 'default' + + let numberFilesCopy = document.getElementById('numberFilesCopy') + if (numberFilesCopy) { + numberFilesCopy.style.backgroundColor = '#d2eefa66' + numberFilesCopy.querySelector('.number').style.display = 'inline' + numberFilesCopy.querySelector('.icon').style.display = 'none' + numberFilesCopy.querySelector('.operate').style.display = 'none' + numberFilesCopy.querySelector('.target .folder').style.display = 'none' + } } dragged.style.backgroundColor = dragBackCorlor } @@ -3179,6 +3191,7 @@ export default { display: flex; .icon { padding: 5px; + width: 40px; } span { font-weight: 500; @@ -3187,9 +3200,13 @@ export default { padding: 0 15px 0 15px; } .target { - background-color: #1d8cff; - color: #f0f0f0; - padding: 8px; + .folder { + background-color: #1d8cff; + color: #f0f0f0; + padding: 8px; + border-radius: 2px; + margin-right: 5px; + } } } diff --git a/src/utils/dom.js b/src/utils/dom.js index 8b0adf1..6f094f7 100644 --- a/src/utils/dom.js +++ b/src/utils/dom.js @@ -1,6 +1,6 @@ // 获取DOM元素到页面顶部的距离 export function getElementToPageTop(el) { - if (el.className.indexOf('parent-grid-item') > -1) { + if (el.className && el.className.indexOf('parent-grid-item') > -1 || el.className.indexOf('van-grid-item van-grid-item--square') > -1) { return el.offsetTop } if (el.parentElement) { @@ -10,7 +10,7 @@ export function getElementToPageTop(el) { } // 获取DOM元素到页面左边的距离 export function getElementToPageLeft(el) { - if (el.className.indexOf('parent-grid-item') > -1) { + if (el.className && el.className.indexOf('parent-grid-item') > -1) { return el.offsetLeft } if (el.offsetParent) {