修复拖拽bug

This commit is contained in:
jmal 2020-05-08 15:26:55 +08:00
parent 44d282d225
commit 164f32c3e4
2 changed files with 48 additions and 24 deletions

View File

@ -1005,30 +1005,32 @@
}
child.ondragstart = function(e){
let count = _this.selectRowData.length
if(_this.selectRowData.length >= 99){
count = 99
if(_this.fileListScrollTop === 0){
let count = _this.selectRowData.length
if(_this.selectRowData.length >= 99){
count = 99
}
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)
}
dragged = e.path[0]
draggedIndex = e.path[0].rowIndex
// 只有选中的才能拖拽
_this.cellMouseIndex = -1
// dragged.style.cursor = 'grabbing'
dragged.style.borderRadius = '10px'
dragBackCorlor = dragged.style.backgroundColor
}
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)
}
dragged = e.path[0]
draggedIndex = e.path[0].rowIndex
// 只有选中的才能拖拽
_this.cellMouseIndex = -1
dragged.style.cursor = 'grabbing'
dragged.style.borderRadius = '10px'
dragBackCorlor = dragged.style.backgroundColor
}
child.ondragend = function(){
Bus.$emit('onDragStart', false)
@ -1502,6 +1504,7 @@
},
tableBodyScroll(table, e) {
this.fileListScrollTop = e.target.scrollTop
Bus.$emit("fileListScrollTop",this.fileListScrollTop)
let scrollBottom = e.target.scrollHeight-e.target.clientHeight-e.target.scrollTop;
if(scrollBottom < 200){
if(!this.finished){

View File

@ -154,6 +154,8 @@
pc: true,
dragover: false,
isDragStart: false,
fileListScrollTop: 0,
dragoverLoop: null,
}
},
computed: {
@ -169,26 +171,42 @@
let dropbox = document.body
document.body.ondragstart = function(e){
return e.target.slot === 'jmal';
return e.target.slot === 'jmal' && that.fileListScrollTop === 0;
}
dropbox.addEventListener("dragenter", function(e){
e.stopPropagation();
e.preventDefault();
}, false);
dropbox.addEventListener("dragover", function(e){
e.stopPropagation();
e.preventDefault();
clearInterval(that.dragoverLoop)
if(!that.isDragStart){
that.dragover = true
}
that.dragoverLoop = setTimeout(function () {
that.dragover = false
},100)
}, false);
dropbox.addEventListener("ondragleave", function(e){
e.stopPropagation();
e.preventDefault();
that.dragover = false
}, false);
dropbox.addEventListener("drop", function(e){
e.stopPropagation();
e.preventDefault();
that.dragover = false
}, false);
Bus.$on('fileListScrollTop', fileListScrollTop => {
this.fileListScrollTop = fileListScrollTop
})
Bus.$on('onDragStart', isDragStart => {
this.isDragStart = isDragStart
})
@ -233,6 +251,9 @@
}
},
onFilesAdded(files) {
if(files.length === 0){
return
}
this.fileListLength = this.uploader.fileList.length
const filePaths = this.uploader.filePaths
const paths = Object.keys(filePaths)