From 316a78bdbd4633845c4756670bdb508f004b29f5 Mon Sep 17 00:00:00 2001 From: jmal Date: Thu, 16 Apr 2020 18:02:18 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=94=BB=E5=8C=BA=E9=80=89?= =?UTF-8?q?=E4=B8=AD=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/img/File.png | Bin 0 -> 240 bytes src/components/ShowFile/ShowFile.vue | 212 ++++++++++++++++++++------- src/utils/directives.js | 65 ++++++++ src/views/test/画矩形.html | 76 ++++++++++ 4 files changed, 302 insertions(+), 51 deletions(-) create mode 100644 src/assets/img/File.png create mode 100644 src/views/test/画矩形.html diff --git a/src/assets/img/File.png b/src/assets/img/File.png new file mode 100644 index 0000000000000000000000000000000000000000..ee44df581797548cdf5d0b18a54d7296a541bcfd GIT binary patch literal 240 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=ffJ?Vc`7~y!O|^zDD58Wz}hu_#R#C{NFG1;3~&&rWrQ(uQ9y$ zTDbN@9^-~8f&UC)6J(7GRI>b~1Q~xYRBY+%>wApR0kMji4NDw=USRNa^>bP0l+XkK)kRs$ literal 0 HcmV?d00001 diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue index 00985c9..d80b4cb 100644 --- a/src/components/ShowFile/ShowFile.vue +++ b/src/components/ShowFile/ShowFile.vue @@ -99,7 +99,6 @@ - @@ -145,9 +144,10 @@ -
+
-
- -
-
-
- {{selectRowData.length>0 ? '已选择 '+this.tableHead[2].label : "选择"}} -
- - 下载 - - - 分享 - - - 移动或复制 - - - + + +
+
+
+ {{selectRowData.length>0 ? '已选择 '+this.tableHead[2].label : "选择"}} +
+ + 下载 + + + 分享 + + + 移动或复制 + + + + +
+
- + + + + +
+ +
+ {{item.name}} +
+ + + +
- - - -
- -
- {{item.name}} -
- - - - +
0 ? evt.clientX + scrollLeft : startX) + retcTop = (startY - evt.clientY - scrollTop > 0 ? evt.clientY + scrollTop : startY) + retcHeight = Math.abs(startY - evt.clientY - scrollTop) + retcWidth = Math.abs(startX - evt.clientX - scrollLeft) + const drawRectangle = $$(wId) + drawRectangle.style.left = retcLeft + 'px' + drawRectangle.style.top = retcTop + 'px' + drawRectangle.style.width = retcWidth + 'px' + drawRectangle.style.height = retcHeight + 'px' + drawRectangle.style.backgroundColor = '#f2f5fa55' + _this.$refs.fileListTable.clearSelection() + console.log(89) + // _this.dragElementList.forEach(element => { + // if(checkTouch(element,$$(wId))){ + // _this.$refs.fileListTable.toggleRowSelection([{row:_this.fileList[element.rowIndex],selected: true}]) + // } + // }) + } + } + } + document.onmouseup = function(e){ + flag = false + if($$(wId)){ + draw.removeChild($$(wId)) + } + } + + //检查两个DIV是否有接触 + let checkTouch = function(o1,o2){ + //得到左上角的绝对坐标 + let p1=getObjPos(o1); + let p2=getObjPos(o2); + let x1=p1.x + let y1=p1.y + let x2=p2.x + let y2=p2.y + let w1=o1.offsetWidth; + let h1=o1.offsetHeight; + let w2=o2.offsetWidth; + let h2=o2.offsetHeight; + return ((x1-x2<=0)&&(x2-x1=0)&&(x1-x2=0)&&(y1-y2 item.index === throughRow.rowIndex) === -1){ // 改变本次进入的容器的状态 dragged.style.cursor = 'copy' dragEnterBackCorlor = throughRow.style.backgroundColor - throughRow.style.backgroundColor = '#e9fdcf' + // throughRow.style.backgroundColor = '#e9fdcf' if(_this.grid){ throughRow.style.height = throughRow.clientWidth + 15 +'px' throughRow.style.width = throughRow.clientWidth + 15 +'px' @@ -920,7 +1031,7 @@ // 离开第一行或最后一行 leaveIndex = throughRow.rowIndex loop = setTimeout(function () { - if(leaveIndex > -1){ + if(leaveIndex > -1) { const leave = target.children[leaveIndex]; clearClass(leave) dragIndex = -1 @@ -934,7 +1045,7 @@ // console.log('放下了'+draggedIndex); const form = _this.fileList[draggedIndex] const to = _this.fileList[dragIndex] - if(form && to && form.id !== to.id && to.isFolder){ + if(form && to && form.id !== to.id && to.isFolder && !_this.selectRowData.includes(to)){ // 移动文件/文件夹 // _this.copyOrMoveApi('move', form.id, to.id) let fileType = '文件' @@ -952,13 +1063,12 @@ } let clearClass = function (node) { - console.log('clearClass',node) if(node){ if(_this.grid){ node = node.children[0].children[0] node.style.height = null node.style.width = null - node.style.backgroundColor = dragEnterBackCorlor + // node.style.backgroundColor = dragEnterBackCorlor dragged.style.cursor = 'grabbing' }else{ node.style.height = 'unset' diff --git a/src/utils/directives.js b/src/utils/directives.js index b8bee61..84bde83 100644 --- a/src/utils/directives.js +++ b/src/utils/directives.js @@ -1,6 +1,71 @@ import Vue from 'vue' +// v-draw-rectangle 画矩形选区 +Vue.directive('drawRectangle',{ + bind(el,binding,vnode,oldVnode){ + let $$ = function(id){ + return document.getElementById(id) + } + let draw = el + console.log('draw',draw) + let wId = "rectangle1" + let startX = 0, startY = 0 + let flag = false + let retcLeft = 0, retcTop = 0, retcHeight = 0, retcWidth = 0 + draw.onmousedown = function(e){ + flag = true + let evt = window.event || e + 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 = evt.x + "px" + div.style.top = evt.y + "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(flag){ + let evt = window.event || e + let scrollTop = document.body.scrollTop || document.documentElement.scrollTop + let scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft + retcLeft = (startX - evt.clientX - scrollLeft > 0 ? evt.clientX + scrollLeft : startX) + retcTop = (startY - evt.clientY - scrollTop > 0 ? evt.clientY + scrollTop : startY) + retcHeight = Math.abs(startY - evt.clientY - scrollTop) + retcWidth = Math.abs(startX - evt.clientX - scrollLeft) + $$(wId).style.left = retcLeft + 'px' + $$(wId).style.top = retcTop + 'px' + $$(wId).style.width = retcWidth + 'px' + $$(wId).style.height = retcHeight + 'px' + $$(wId).style.backgroundColor = '#f2f5fa55' + } + } + + } + + document.onmouseup = function(e){ + flag = false + if($$(wId)){ + console.log('left',retcLeft, 'top',retcTop, 'width',retcWidth, 'hieght',retcHeight) + draw.removeChild($$(wId)) + if(retcWidth > 1 && retcHeight > 1){ + } + } + return false + } + } +}) + // v-aplayerDrag: 音乐播放拖拽 Vue.directive('aplayerDrag', { bind(el, binding, vnode, oldVnode) { diff --git a/src/views/test/画矩形.html b/src/views/test/画矩形.html new file mode 100644 index 0000000..55e4326 --- /dev/null +++ b/src/views/test/画矩形.html @@ -0,0 +1,76 @@ + + + + 鼠标拖动画矩形 + + + + +
+ + +