vuefilemanager/resources/js/components/FilesView/DragUI.vue

<template>
    <TitlePreview icon="check-square" :title="title" :subtitle="subtitle" id="drag-ui" v-show="isVisible" />
</template>

<script>
import TitlePreview from './TitlePreview'
import { mapGetters } from 'vuex'
import { events } from '../../bus'

export default {
    name: 'DragUI',
    components: {
        TitlePreview,
    },
    computed: {
        ...mapGetters(['clipboard']),
        title() {
            let filesLength = this.clipboard.length,
                hasDraggedItem = this.clipboard.includes(this.draggedItem)

            // Title for multiple selected items
            if (filesLength > 1 && hasDraggedItem) {
                return this.$t('file_detail.selected_multiple')
            }

            // Title for single item
            if ((filesLength < 2 || !hasDraggedItem) && this.draggedItem) {
                return this.draggedItem.data.attributes.name
            }
        },
        subtitle() {
            let filesLength = this.clipboard.length,
                hasDraggedItem = this.clipboard.includes(this.draggedItem)

            // Subtitle for multiple selected items
            if (filesLength > 1 && hasDraggedItem) {
                return filesLength + ' ' + this.$tc('file_detail.items', filesLength)
            }

            if ((filesLength < 2 || !hasDraggedItem) && this.draggedItem) {
                // Subtitle for single folder
                if (this.draggedItem.data.type === 'folder') {
                    return this.draggedItem.items == 0 ? this.$t('folder.empty') : this.$tc('folder.item_counts', this.draggedItem.items)
                }

                // Subtitle for single file
                if (this.draggedItem.data.type !== 'folder' && this.draggedItem.data.attributes.mimetype) {
                    return '.' + this.draggedItem.data.attributes.mimetype
                }
            }
        },
    },
    data() {
        return {
            isVisible: false,
            draggedItem: undefined,
        }
    },
    created() {
        events.$on('dragstart', (data) => {
            this.draggedItem = data

            setTimeout(() => {
                this.isVisible = true
            }, 100)
        })

        events.$on('drop', () => (this.isVisible = false))
    },
}
</script>

<style lang="scss" scoped>
@import '../../../sass/vuefilemanager/variables';
@import '../../../sass/vuefilemanager/mixins';

#drag-ui {
    max-width: 300px;
    min-width: 250px;
    position: fixed;
    z-index: 10;
    pointer-events: none;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 7px 25px 1px rgba(0, 0, 0, 0.12);
    background: white;
}

.dark {
    #drag-ui {
        background: $dark_mode_foreground;
    }
}
</style>