diff --git a/src/assets/img/File.png b/src/assets/img/File.png new file mode 100644 index 0000000..ee44df5 Binary files /dev/null and b/src/assets/img/File.png differ 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 @@ + + + + 鼠标拖动画矩形 + + + + +
+ + +