diff --git a/src/views/home/index.vue b/src/views/home/index.vue index af8af31..47f37fd 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -511,56 +511,99 @@ export default { // } - //可拖拽的表格 - const dragTable = document.querySelector('#drag-table'); + // //可拖拽的表格 + // const dragTable = document.querySelector('#drag-table'); + // + // dragTable.ondragstart = function(){ + // console.log('开始拖拽'); + // } + // dragTable.ondragend = function(){ + // console.log('拖拽结束'); + // } - dragTable.ondragstart = function(){ - console.log('开始拖拽'); - } - dragTable.ondragend = function(){ - console.log('拖拽结束'); - } + const _this = this + // 被拖动的元素的索引 + let draggedIndex = -1; + let dragged = null; - var target = document.querySelector('.el-table__body-wrapper tbody'); + let target = document.querySelector('.el-table__body-wrapper tbody'); let rows = 0;//行数 setTimeout(function () { rows = target.childElementCount - console.log(target.childElementCount); for (let i = 0; i < target.childElementCount; i++) { const child = target.children[i] child.draggable = true - child.ondragstart = function(){ + // child.style.cursor = 'copy' + child.ondragstart = function(e){ + dragged = e.path[0] + draggedIndex = e.path[0].rowIndex console.log('child'+i+'开始拖拽'); + _this.cellMouseIndex = -1 + dragged.style.cursor = 'grabbing' } 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) // 被拖动的元素正在那个容器里 - let drageIndex = -1 + let dragIndex = -1 target.ondragenter = function(e){ + clearTimeout(loop) if(e.path[0].tagName === 'TD'){ const selectRow = e.path.find(path => { if(path.className === 'el-table__row'){ return path } }) - if(drageIndex !== selectRow.rowIndex){ - console.log('拖动进入目标元素'+selectRow.rowIndex); - // selectRow.style.height = 100+'px' - drageIndex = selectRow.rowIndex + if(dragIndex !== selectRow.rowIndex){ + if(dragIndex > -1){ + // 清除上次进入的容器的状态 + const last = target.children[dragIndex]; + clearClass(last) + } + // console.log('拖动进入目标元素'+selectRow.rowIndex); + // 不是自己或未文件夹时才改变状态 + if(draggedIndex !== selectRow.rowIndex && _this.fileList[selectRow.rowIndex].isFolder){ + // 改变本次进入的容器的状态 + dragged.style.cursor = 'copy' + selectRow.style.height = 60+'px' + selectRow.style.backgroundColor = '#e9fdcf' + } + dragIndex = selectRow.rowIndex } - leaveIndex = -1 } + leaveIndex = -1 + } + + target.ondragover = function(){ + // console.log('目标元素中拖拽...'); + leaveIndex = -1 } - // target.ondragover = function(){ - // console.log('目标元素中拖拽'); - // } let loop = null let leaveIndex = -1 // 是否拖出了整个table, -1表示还在table内 @@ -572,10 +615,11 @@ export default { return path } }) - if(drageIndex !== selectRow.rowIndex){ - console.log('拖动离开目标元素'+selectRow.rowIndex); + if(dragIndex !== selectRow.rowIndex){ + // console.log('拖动离开目标元素'+selectRow.rowIndex); // selectRow.style.height = 'unset' - // drageIndex = selectRow.rowIndex + // selectRow.style.backgroundColor = '#fff' + // dragIndex = selectRow.rowIndex } if(selectRow.rowIndex === 0 || selectRow.rowIndex === rows-1){ // 离开第一行或最后一行 @@ -583,6 +627,9 @@ export default { loop = setTimeout(function () { if(leaveIndex > -1){ console.log("离开了",leaveIndex) + const leave = target.children[leaveIndex]; + clearClass(leave) + dragIndex = -1 } },100) } @@ -592,6 +639,13 @@ export default { console.log('拖放'); } + let clearClass = function (node) { + if(node){ + node.style.height = 'unset' + node.style.backgroundColor = '#fff' + } + dragged.style.cursor = 'grabbing' + } }, // 格式化最近时间 @@ -1252,25 +1306,32 @@ export default { } else { fileIds.push(this.rowContextData.id) } + this.copyOrMoveApi(operating,fileIds,this.selectTreeNode.id) + }, + copyOrMoveApi(operating,froms,to) { + let operation = '复制' + if(operating === 'move'){ + operation = '移动' + } let copying = this.$message({ iconClass: 'el-icon-loading', type: 'info', duration: 0, dangerouslyUseHTMLString: true, - message: '  正在{operation}' + message: '  正在'+operation+'' }); this.dialogMoveOrCopyVisible = false api[operating]({ userId: this.$store.state.user.userId, username: this.$store.state.user.name, - froms: fileIds, - to: this.selectTreeNode.id + froms: froms, + to: to }).then(() => { copying.iconClass = null copying.type = 'success' copying.message = operation+'成功' if(this.rowContextData.isFolder){ - this.$refs.directoryTree.append(this.rowContextData,this.selectTreeNode.id) + this.$refs.directoryTree.append(this.rowContextData,to) } if(operating === 'move'){