nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 00:02:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

bulk-operations fix drop of dragged item

Browse Source
This commit is contained in:
Milos Holba
2020-12-02 19:56:54 +01:00
parent 66aad7c488
commit aff2594ef2
9 changed files with 106 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/App.vue
View File

@@ -28,7 +28,7 @@
<!-- Mobile Menu for Multiselected items -->
<MobileMultiSelectMenu/>
<!-- Multi Select Drag & Drop UI -->
<!-- Drag & Drop UI -->
<DragUI/>
<!--Mobile Menu-->

24
resources/js/components/FilesView/DragUI.vue
View File

@@ -1,7 +1,5 @@
<template>
<div>
<MultiSelected :title="title" :subtitle="subtitle" id="multi-select-ui" v-show="draged" />
</div>
<MultiSelected :title="title" :subtitle="subtitle" id="multi-select-ui" v-show="dragged" />
</template>
<script>
@@ -15,24 +13,24 @@ import {events} from '@/bus'
computed: {
...mapGetters(['fileInfoDetail']),
title(){
if(this.fileInfoDetail.length > 1 && this.fileInfoDetail.includes(this.dragedItem)) {
if(this.fileInfoDetail.length > 1 && this.fileInfoDetail.includes(this.draggedItem)) {
return this.$t('file_detail.selected_multiple')
}
if((this.fileInfoDetail.length < 2 || !this.fileInfoDetail.includes(this.dragedItem)) && this.dragedItem ) {
return this.dragedItem.name
if((this.fileInfoDetail.length < 2 || !this.fileInfoDetail.includes(this.draggedItem)) && this.draggedItem ) {
return this.draggedItem.name
}
},
subtitle(){
if(this.fileInfoDetail.length > 1 && this.fileInfoDetail.includes(this.dragedItem) ) {
if(this.fileInfoDetail.length > 1 && this.fileInfoDetail.includes(this.draggedItem) ) {
return this.fileInfoDetail.length + ' ' + this.$tc('file_detail.items', this.fileInfoDetail.length)
}
},
},
data () {
return {
draged: false,
dragedItem: undefined
dragged: false,
draggedItem: undefined
}
},
mounted () {
@@ -40,11 +38,13 @@ import {events} from '@/bus'
// Hnadle Drag & Drop Ghost show
events.$on('dragstart', (data) => {
this.draged = true
this.dragedItem = data
setTimeout(() => {
this.dragged = true
}, 50);
this.draggedItem = data
})
events.$on('drop', () => {
this.draged = false
this.dragged = false
})
}

21
resources/js/components/FilesView/FileBrowser.vue
View File

@@ -38,7 +38,7 @@
v-for="item in data"
:key="item.unique_id"
class="file-item"
:class="dragedItems.includes(item) ? 'draged' : '' "
:class="draggedItems.includes(item) ? 'dragged' : '' "
/>
</transition-group>
</div>
@@ -59,7 +59,7 @@
v-for="item in data"
:key="item.unique_id"
class="file-item"
:class="dragedItems.includes(item) ? 'draged' : '' "
:class="draggedItems.includes(item) ? 'dragged' : '' "
/>
</transition-group>
</div>
@@ -137,7 +137,7 @@
isEmpty() {
return this.data.length == 0
},
dragedItems() {
draggedItems() {
//Set opacity for dragged items
if(!this.fileInfoDetail.includes(this.draggingId)){
@@ -264,7 +264,15 @@
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.draged {
.file-list {
.dragged {
/deep/.is-dragenter {
border: 2px solid transparent;
}
}
}
.dragged {
opacity: 0.5;
}
@@ -275,11 +283,6 @@
}
.draged-clone {
display: none !important;
opacity: 0 !important;
}
.mobile-multi-select {
bottom: 50px !important;
}

2
resources/js/components/FilesView/FileItemGrid.vue
View File

@@ -168,8 +168,6 @@
dragEnter() {
if (this.data.type !== 'folder') return
if(this.fileInfoDetail.includes(this.data)) return
this.area = true
},
dragLeave() {

2
resources/js/components/FilesView/FileItemList.vue
View File

@@ -160,8 +160,6 @@ export default {
dragEnter() {
if (this.data.type !== 'folder') return
if(this.fileInfoDetail.includes(this.data)) return
this.area = true
},
dragLeave() {

6
resources/js/components/Others/TreeMenuNavigator.vue
View File

@@ -122,13 +122,13 @@
this.draggedItem = []
})
//Get draged item
//Get dragged item
events.$on('dragstart' , (data) => {
//If is draged item not selected
//If is dragged item not selected
if(!this.fileInfoDetail.includes(data)) {
this.draggedItem = [data]
}
//If are the draged items selected
//If are the dragged items selected
if(this.fileInfoDetail.includes(data)) {
this.draggedItem = this.fileInfoDetail
}

5
resources/js/main.js vendored
View File

@@ -5,6 +5,7 @@ import router from "./router";
import i18n from "./i18n/index.js";
import App from "./App.vue";
import store from "./store";
import {events} from "./bus";
import Helpers from "./helpers";
import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -96,6 +97,10 @@ document.addEventListener('drag', (event) => {
},false)
document.addEventListener("dragend", () => {
events.$emit('drop')
}, false);
var vueFileManager = new Vue({
i18n,
store,

2
resources/js/views/FilePages/Files.vue
View File

@@ -162,7 +162,7 @@
events.$emit('drop')
// Check if draged item is folder
// Check if dragged item is folder
if (this.draggedItem && this.draggedItem.type !== 'folder') return
// Check if folder exist in favourites