From 5121a66fdbe9f65d650fd89f8c30924d8333d2c0 Mon Sep 17 00:00:00 2001 From: jmal Date: Wed, 7 Apr 2021 18:00:54 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E6=8B=96=E6=8B=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/img/arrow1_left.png | Bin 0 -> 3456 bytes src/assets/img/hide.png | Bin 0 -> 228 bytes src/components/Icon/Icon.vue | 4 +- src/components/ShowFile/ShowFile.vue | 272 +++++++++++------- .../SimpleUploader/globalUploader.vue | 3 + 5 files changed, 178 insertions(+), 101 deletions(-) create mode 100644 src/assets/img/arrow1_left.png create mode 100644 src/assets/img/hide.png diff --git a/src/assets/img/arrow1_left.png b/src/assets/img/arrow1_left.png new file mode 100644 index 0000000000000000000000000000000000000000..b3ebc5c3c0023c303d9949e47e26d00c1fddaf3b GIT binary patch literal 3456 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 ilAj3yBqcU3YX1*ToKVcP=R`CB0000 - -
+ +
+ + +
+ 移动到： +
+
+ document +
+
@@ -1033,32 +1041,28 @@ export default { index = elPath.findIndex(el => el.className === 'plTableBox') } if(index < 0){ - _this.dragElementList.forEach(element => { - _this.$refs.fileListTable.clearSelection() - }) + _this.$refs.fileListTable.clearSelection() } } let scrollTop = draw.scrollTop || draw.scrollTop let scrollLeft = draw.scrollLeft || draw.scrollLeft startX = evt.clientX + scrollLeft startY = evt.clientY + scrollTop - let 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) 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 @@ -1070,7 +1074,7 @@ export default { if ((retcHeight + retcWidth) < 4) { return } - const drawRectangle = $$(wId) + const drawRectangle = document.getElementById(wId) if (drawRectangle) { noScroll() drawRectangle.style.left = retcLeft + 'px' @@ -1084,7 +1088,6 @@ export default { drawSelect({x: retcLeft, y: retcTop, w: retcWidth, h: retcHeight}) } } - moveCount++ } document.onmouseup = function (e) { document.onmousemove = null; @@ -1093,9 +1096,12 @@ export default { restoreScroll() _this.drawFlag = false }, 50) - if ($$(wId)) { - draw.removeChild($$(wId)) + const rectangle = document.getElementById(wId) + if (rectangle) { + draw.removeChild(rectangle) } + const dragingDivs = Array.prototype.slice.call(draw.getElementsByClassName('dragingDiv')) + dragingDivs.forEach(el => draw.removeChild(el)) } } @@ -1169,7 +1175,7 @@ export default { // 被拖拽元素的背景色 let dragBackCorlor = null const _this = this - // 被拖动的元素的索引 + // 被拖动的元素 let dragged = null; // 被拖动的元素的索引 let draggedIndex = -1; @@ -1181,13 +1187,18 @@ export default { // 正在拖动的元素 let dragingDiv = null + let container = document.querySelector('.dashboard-container') + // 目标元素 let target = document.querySelector('.el-table__body-wrapper tbody') if (this.grid) { target = document.querySelector('.van-checkbox-group .van-grid') } let draw = document.getElementById('v-draw-rectangle') - let rows = 0;//行数 + let rows = 0//行数 + + let firstOver = 0 // 是否刚开始拖动 + let moveTitle = '' setTimeout(function () { rows = target.childElementCount _this.dragElementList = [] @@ -1203,14 +1214,18 @@ export default { let pos = getObjPos(child) pos.w = child.offsetWidth pos.h = child.offsetHeight + + child.w = child.offsetWidth + child.h = child.offsetWidth + child.x = pos.x + child.y = pos.y pos.rowIndex = child.rowIndex - _this.dragElementList.push(pos) + _this.dragElementList.push(child) // 使元素可拖动 child.draggable = true // 给能拖动的元素加上标识,只有加上此标识才能被拖动,否则即使draggable = true,也无法拖动(在全局的ondragstart里拦截) child.slot = 'jmal' - let childOfImg = child.querySelector('.el-avatar > img') if (_this.grid) { childOfImg = child.querySelector('.el-image > img') @@ -1218,59 +1233,8 @@ export default { if (childOfImg) { childOfImg.draggable = false } - child.ondragstart = function (e) { - if (_this.drawFlag) { - e.preventDefault() - e.stopPropagation() - return - } - // document.onmousemove = function (e) { - // console.log(e.clientX, e.clientY) - // } - if (_this.fileListScrollTop === 0) { - let count = _this.selectRowData.length - if (_this.selectRowData.length >= 99) { - count = 99 - } - - dragingDiv = child.cloneNode(true) - dragingDiv.id = 'sdfsdfsdf' - dragingDiv.style.width = child.offsetWidth - dragingDiv.style.heigth = child.offsetHeight - draw.appendChild(dragingDiv) - - let dragImage = document.getElementById('dragImage'); - dragImage.src = require(`@/assets/img/move-file/move-file${count}.png`) - - e.dataTransfer.setDragImage(dragImage, 10, 10); - - Bus.$emit('onDragStart', true) - // 避免和画矩形选区冲突 - _this.drawFlag = false - let rectangle = document.getElementById('rectangle1') - if (rectangle) { - document.getElementById('v-draw-rectangle').removeChild(rectangle) - } - const elPath = e.path || (e.composedPath && e.composedPath()) - dragged = elPath[0] - draggedIndex = elPath[0].rowIndex - // 只有选中的才能拖拽 - _this.cellMouseIndex = -1 - // dragged.style.cursor = 'grabbing' - dragged.style.borderRadius = '10px' - dragBackCorlor = dragged.style.backgroundColor - } - } - child.ondragend = function () { - Bus.$emit('onDragStart', false) - // console.log('child'+i+'拖拽结束'); - // 清除上次进入的容器的状态 - const last = target.children[dragIndex]; - clearClass(last) - dragged.style.cursor = 'default' - } } - }, 0) + }, 300) // 被拖动的元素正在那个容器里 let dragIndex = -1 @@ -1326,8 +1290,80 @@ export default { } } - target.ondragenter = function (e) { - // console.log(e,e.toElement) + container.ondragend = function (e) { + Bus.$emit('onDragStart', false) + // console.log('child'+dragIndex+'拖拽结束'); + // 清除上次进入的容器的状态 + const last = target.children[dragIndex]; + clearClass(last) + dragged.style.cursor = 'default' + e.target.parentNode.parentNode.title = moveTitle + _this.selectRowData.forEach(row => { + let dragingDiv = document.getElementById('dragingDiv' + row.index) + dragingDiv.style.transition = 'all 0.3s' + dragingDiv.style.top = dragingDiv.original.top + dragingDiv.style.left = dragingDiv.original.left + }) + // setTimeout(()=> { + // _this.selectRowData.forEach(row => { + // draw.removeChild(document.getElementById('dragingDiv' + row.index)) + // }) + // }, 300) + } + container.ondragstart = (e) => { + if (_this.drawFlag) { + e.preventDefault() + e.stopPropagation() + return + } + if (_this.fileListScrollTop === 0) { + moveTitle = e.target.parentNode.parentNode.title + e.target.parentNode.parentNode.title = '' + _this.selectRowData.forEach((row,index) => { + const element = _this.dragElementList[row.index] + const rowIndex = element.rowIndex + dragingDiv = element.cloneNode(true) + dragingDiv.id = 'dragingDiv'+rowIndex + 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 + const pos = _this.dragElementList[rowIndex] + dragingDiv.style.top = pos.y - pos.h/2 + 10 + 'px' + dragingDiv.style.left = pos.x - pos.w/2 + 6 + 'px' + dragingDiv.original = {top: dragingDiv.style.top, left: dragingDiv.style.left} + if (index === 0){ + let numberFilesCopy = document.getElementById("numberFiles").cloneNode(true) + numberFilesCopy.id = 'numberFilesCopy' + numberFilesCopy.querySelector('.number').innerHTML = _this.selectRowData.length + '个文件' + dragingDiv.appendChild(numberFilesCopy) + } + + draw.appendChild(dragingDiv) + }) + firstOver = 0 + let dragImage = document.getElementById('dragImage'); + e.dataTransfer.setDragImage(dragImage, 10, 10) + Bus.$emit('onDragStart', true) + // 避免和画矩形选区冲突 + _this.drawFlag = false + let rectangle = document.getElementById('rectangle1') + if (rectangle) { + document.getElementById('v-draw-rectangle').removeChild(rectangle) + } + dragged = e.target + draggedIndex = dragged.rowIndex + // 只有选中的才能拖拽 + _this.cellMouseIndex = -1 + dragged.style.cursor = 'not-allowed' + dragBackCorlor = dragged.style.backgroundColor + } + } + container.ondragenter = function (e) { + // console.log('ondragenter') clearTimeout(loop) // 由于被拖动的元素 经过tbody中的每一元素都会触发该事件, 但是我们只需要它正在那一行上就行了 let throughRow = judgThroughDom(e, 'enter') @@ -1343,6 +1379,11 @@ export default { if (draggedIndex !== throughRow.rowIndex && _this.fileList[throughRow.rowIndex].isFolder && _this.selectRowData.findIndex(item => item.index === throughRow.rowIndex) === -1) { // 改变本次进入的容器的状态 dragged.style.cursor = 'copy' + + let numberFilesCopy = document.getElementById('numberFilesCopy') + console.log('numberFilesCopy', numberFilesCopy, numberFilesCopy.querySelector('.number'), numberFilesCopy.querySelector('.operate')) + numberFilesCopy.querySelector('.number').style.display = 'none' + // numberFilesCopy.querySelector('.targer').style.display = 'block' dragEnterBackCorlor = throughRow.style.backgroundColor throughRow.style.backgroundColor = '#9fcdfc99' } @@ -1352,25 +1393,30 @@ export default { } } - draw.ondragover = function (e) { - - const drawRectangle = document.getElementById('sdfsdfsdf') - if (drawRectangle) { - console.log('drawRectangle') - // drawRectangle.style.left = retcLeft + 'px' - // drawRectangle.style.top = retcTop + 'px' - // drawRectangle.style.width = retcWidth + 'px' - // drawRectangle.style.height = retcHeight + 'px' - // drawRectangle.style.backgroundColor = '#f2f5fa55' - } - e.preventDefault(); + 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.top = e.clientY - 50 + index*3 + 'px' + if (firstOver === 0){ + drawRectangle.style.zIndex = 999 + setTimeout(()=>{ + drawRectangle.style.transition = '' + },300) + } + } + }) + e.preventDefault() leaveIndex = -1 + firstOver++ } let loop = null let leaveIndex = -1 // 是否拖出了整个table, -1表示还在table内 - target.ondragleave = function (e) { + container.ondragleave = function (e) { clearTimeout(loop) let throughRow = judgThroughDom(e, 'leave') if (throughRow) { @@ -1389,8 +1435,9 @@ export default { } } } - target.ondrop = function () { + container.ondrop = function () { // console.log('放下了'+draggedIndex); + const form = _this.fileList[draggedIndex] const to = _this.fileList[dragIndex] if (form && to && form.id !== to.id && to.isFolder && !_this.selectRowData.includes(to)) { @@ -1425,7 +1472,7 @@ export default { node.style.backgroundColor = null } } - dragged.style.cursor = 'grabbing' + dragged.style.cursor = 'default' } dragged.style.backgroundColor = dragBackCorlor } @@ -3113,10 +3160,37 @@ export default { background-size: cover; background-position: center; padding: 0; + border-radius: 5px!important; } .vmode{ padding: 5px 10px; margin-left: -5px; } +.number-files { + position: absolute; + top: -42px; + left: 0; + height: 40px; + line-height: 40px; + -webkit-backdrop-filter: saturate(180%) blur(20px); + backdrop-filter: saturate(180%) blur(20px); + background: #d2eefa66; + border-radius: 5px; + display: flex; + .icon { + padding: 5px; + } + span { + font-weight: 500; + } + .number { + padding: 0 15px 0 15px; + } + .target { + background-color: #1d8cff; + color: #f0f0f0; + padding: 8px; + } +} diff --git a/src/components/SimpleUploader/globalUploader.vue b/src/components/SimpleUploader/globalUploader.vue index 01ad14a..c9fbb18 100755 --- a/src/components/SimpleUploader/globalUploader.vue +++ b/src/components/SimpleUploader/globalUploader.vue @@ -179,6 +179,9 @@ document.body.ondragstart = function(e){ if(that.enableDragUplaod) { + if(e.target.slot === 'jmal') { + that.isDragStart = true + } return e.target.slot === 'jmal' && that.fileListScrollTop === 0 } return true