From bb027543d144ca4be50186c1088bfb468d5b207d Mon Sep 17 00:00:00 2001 From: jmal Date: Wed, 4 Mar 2020 18:02:16 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=8B=96=E6=8B=BD=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E6=96=87=E4=BB=B6/=E6=96=87=E4=BB=B6=E5=A4=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/home/index.vue | 177 ++++++++++----------------------------- 1 file changed, 42 insertions(+), 135 deletions(-) diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 47f37fd..8a08c88 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -267,7 +267,6 @@ import api from '@/api/upload-api' import BreadcrumbFilePath from "../../components/Breadcrumb/BreadcrumbFilePath"; import IconFile from "../../components/Icon/IconFile"; import vuedraggable from 'vuedraggable'; -import Sortable from 'sortablejs' export default { components: { IconFile, BreadcrumbFilePath, vuedraggable}, @@ -420,112 +419,15 @@ export default { } }, methods: { - draggableChange(){ - console.log(678) - }, // 行拖拽 rowDrop() { - // const tbody = document.querySelector('.el-table__body-wrapper tbody') - // const _this = this - // Sortable.create(tbody, { - // swap: true, - // swapThreshold: 1, // Threshold of the swap zone - // invertSwap: true, // Will always use inverted swap zone if set to true - // invertedSwapThreshold: 1, // Threshold of the inverted swap zone (will be set to swapThreshold value by default) - // ghostClass: "sortable-ghost", // drop placeholder的css类名 - // chosenClass: "sortable-chosen", // 被选中项的css 类名 - // dragClass: "sortable-drag", - // animation: 150, - // sort: false, - // onMove: function (evt) { - // console.log('onChoose', evt) - // }, - // }) - - // 可拖拽的表格 - // const dragTable = document.querySelector('#drag-table'); - // - // const row = document.querySelector('.el-table__body-wrapper tbody'); - // document.onmousedown = function (e) { - // const _this = this - // //再次清空定时器，防止重复注册定时器 - // clearTimeout(this.dragLoop); - // this.dragLoop = setTimeout(function () { - // console.log('onmousedown',e) - // // 所选行到浏览器的总高度 - // let totalHeight = 0 - // // 获取目标元素(点击的哪一行) - // let pathIndex = 0 - // const selectRow = e.path.find((path,index) => { - // if(path.className === 'el-table__row'){ - // pathIndex = index - // return path - // } - // }) - // e.path.forEach((path,index) => { - // if(path.offsetTop && index > pathIndex){ - // totalHeight += path.offsetTop - // } - // }) - // console.log(totalHeight) - // // 拷贝目标元素到dragTable - // let c = selectRow.cloneNode(true) - // dragTable.appendChild(c) - // console.log(dragTable) - // //算出鼠标相对元素的位置 - // let disX = e.clientX - selectRow.offsetLeft; - // let disY = e.clientY - selectRow.offsetTop; - // dragTable.style.opacity = 0.8 - // dragTable.style.cursor = 'move' - // dragTable.style.left = e.clientX - disX + 'px'; - // dragTable.style.top = e.clientY - disY + totalHeight + 'px'; - // dragTable.parentElement.style.display = 'block' - // - // //鼠标按下并移动的事件 - // document.onmousemove = function(e){ - // console.log('onmousemove') - // // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置 - // let left = e.clientX - disX; - // let top = e.clientY - disY; - // // // 绑定元素位置到positionX和positionY上面 - // // this.positionX = top; - // // this.positionY = left; - // //移动当前元素 - // dragTable.style.left = left + 'px'; - // dragTable.style.top = top + totalHeight + 'px'; - // } - // - // // 松开鼠标 - // document.onmouseup = function () { - // console.log('onmouseup') - // document.onmousemove = null; - // dragTable.parentElement.style.display = 'none' - // // 移除dragTable内的行 - // dragTable.childNodes.forEach(node => { - // dragTable.removeChild(node) - // }) - // clearTimeout(_this.dragLoop); - // } - // - // },150) - // } - - - // //可拖拽的表格 - // const dragTable = document.querySelector('#drag-table'); - // - // dragTable.ondragstart = function(){ - // console.log('开始拖拽'); - // } - // dragTable.ondragend = function(){ - // console.log('拖拽结束'); - // } - const _this = this // 被拖动的元素的索引 - let draggedIndex = -1; let dragged = null; + // 被拖动的元素的索引 + let draggedIndex = -1; + // 目标元素 let target = document.querySelector('.el-table__body-wrapper tbody'); let rows = 0;//行数 setTimeout(function () { @@ -543,27 +445,6 @@ export default { } child.ondragend = function(){ console.log('child'+i+'拖拽结束'); - // 清除上次进入的容器的状态 - const last = target.children[dragIndex]; - clearClass(last) - dragged.style.cursor = 'default' - - if(last){ - // 移动文件/文件夹 - const form = _this.fileList[draggedIndex] - const to = _this.fileList[dragIndex] - let fileType = '文件' - if(form.isFolder){ - fileType = '文件夹' - } - _this.$confirm('是将'+fileType+'否移动到 "' + to.name + '"?', '提示', { - confirmButtonText: '确定', - cancelButtonText: '取消', - type: 'info' - }).then(() => { - _this.copyOrMoveApi('move', form.id, to.id) - }) - } } } },0) @@ -573,13 +454,16 @@ export default { target.ondragenter = function(e){ clearTimeout(loop) + + // 由于被拖动的元素 经过tbody中的每一元素都会触发该事件, 但是我们只需要它正在那一行上就行了 if(e.path[0].tagName === 'TD'){ - const selectRow = e.path.find(path => { + // throughRow 表示被拖动的元素正在哪一行上 + const throughRow = e.path.find(path => { if(path.className === 'el-table__row'){ return path } }) - if(dragIndex !== selectRow.rowIndex){ + if(dragIndex !== throughRow.rowIndex){ if(dragIndex > -1){ // 清除上次进入的容器的状态 const last = target.children[dragIndex]; @@ -587,20 +471,21 @@ export default { } // console.log('拖动进入目标元素'+selectRow.rowIndex); // 不是自己或未文件夹时才改变状态 - if(draggedIndex !== selectRow.rowIndex && _this.fileList[selectRow.rowIndex].isFolder){ + if(draggedIndex !== throughRow.rowIndex && _this.fileList[throughRow.rowIndex].isFolder){ // 改变本次进入的容器的状态 dragged.style.cursor = 'copy' - selectRow.style.height = 60+'px' - selectRow.style.backgroundColor = '#e9fdcf' + throughRow.style.height = 60+'px' + throughRow.style.backgroundColor = '#e9fdcf' } - dragIndex = selectRow.rowIndex + dragIndex = throughRow.rowIndex } } leaveIndex = -1 } - target.ondragover = function(){ + target.ondragover = function(e){ // console.log('目标元素中拖拽...'); + e.preventDefault(); leaveIndex = -1 } @@ -610,20 +495,20 @@ export default { target.ondragleave = function(e){ clearTimeout(loop) if(e.path[0].tagName === 'TD'){ - const selectRow = e.path.find(path => { + const throughRow = e.path.find(path => { if(path.className === 'el-table__row'){ return path } }) - if(dragIndex !== selectRow.rowIndex){ + if(dragIndex !== throughRow.rowIndex){ // console.log('拖动离开目标元素'+selectRow.rowIndex); // selectRow.style.height = 'unset' // selectRow.style.backgroundColor = '#fff' // dragIndex = selectRow.rowIndex } - if(selectRow.rowIndex === 0 || selectRow.rowIndex === rows-1){ + if(throughRow.rowIndex === 0 || throughRow.rowIndex === rows-1){ // 离开第一行或最后一行 - leaveIndex = selectRow.rowIndex + leaveIndex = throughRow.rowIndex loop = setTimeout(function () { if(leaveIndex > -1){ console.log("离开了",leaveIndex) @@ -632,11 +517,33 @@ export default { dragIndex = -1 } },100) - } + }`` } } target.ondrop = function(){ - console.log('拖放'); + console.log('放下了'+draggedIndex); + // 清除上次进入的容器的状态 + const last = target.children[dragIndex]; + clearClass(last) + dragged.style.cursor = 'default' + + const form = _this.fileList[draggedIndex] + const to = _this.fileList[dragIndex] + if(last && form.id !== to.id && to.isFolder){ + // 移动文件/文件夹 + // _this.copyOrMoveApi('move', form.id, to.id) + let fileType = '文件' + if(form.isFolder){ + fileType = '文件夹' + } + _this.$confirm('是否将'+fileType+'否移动到 "' + to.name + '"?', '提示', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'info' + }).then(() => { + _this.copyOrMoveApi('move', form.id, to.id) + }).catch() + } } let clearClass = function (node) {