bulk-operations multiSelect items UI v0.1

resources/js/components/FilesView/FileBrowser.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="file-content" :class="{ 'is-offset': uploadingFilesCount, 'is-dragging': isDragging }"
+    <div class="file-content" id="file-content-id" :class="{ 'is-offset': uploadingFilesCount, 'is-dragging': isDragging }"
          @dragover.prevent
          @drop.stop.prevent="dropUpload($event)"
          @dragover="dragEnter"
@@ -29,6 +29,7 @@
                         :class="FilePreviewType"
                 >
                     <FileItemList
+                            @drag.native="mousePosition"
                             @dragstart="dragStart(item)"
                             @drop.stop.native.prevent="dragFinish(item, $event)"
                             @contextmenu.native.prevent="contextMenu($event, item)"
@@ -81,6 +82,7 @@
             <!--If file info panel empty show message-->
             <EmptyMessage v-if="fileInfoDetail.length === 0" :message="$t('messages.nothing_to_preview')" icon="eye-off"/>
         </div>
+            <MultiSelected @click.prevent="" :clone-element="dragInProgress" :style="{ top: positionY + 'px', left: positionX + 'px' }" id="multi-selected" v-if="dragInProgress && this.fileInfoDetail.length > 1" />
     </div>
 </template>
 
@@ -135,10 +137,25 @@
             return {
                 draggingId: undefined,
                 isDragging: false,
-                mobileMultiSelect: false
+                mobileMultiSelect: false,
+                dragInProgress:false,
+                positionY:undefined,
+                positionX:undefined
             }
         },
         methods: {
+            mousePosition() {
+               let contentLeft = document.getElementById('file-content-id').getBoundingClientRect().left -15
+                
+                if(event.clientX  > contentLeft ) {
+                this.positionY = event.clientY -85
+                this.positionX = event.clientX -350
+                }else if (event.clientX < contentLeft){
+                this.positionY = event.clientY -15
+                this.positionX = event.clientX -30
+                }
+                // console.log(event.clientX, contentLeft)
+            },
             dropUpload(event) {
                 // Upload external file
                 this.$uploadExternalFiles(event, this.currentFolder.unique_id)
@@ -152,16 +169,11 @@
                 this.isDragging = false
             },
             dragStart(data) {
-               
-               let elementClone = event.target.cloneNode(true)
-               elementClone.className = 'draged-clone'
-               console.log(elementClone)
-            //    elementClone.style.backgroundColor  = "red"  
-                // let element = document.getElementsByClassName('file-item')
-                // element.style.display = "none"
-                // var crt = this.cloneNode(true);
-                // crt.style.backgroundColor = "red";
-                // this.style.display = "none"
+                let img = document.createElement('img')
+                img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                event.dataTransfer.setDragImage(img, 0, 0)
+
+                this.dragInProgress = true
 
                 events.$emit('dragstart', data)
 
@@ -170,6 +182,7 @@
             },
             dragFinish(data, event) {
 
+                this.dragInProgress = false
                 if (event.dataTransfer.items.length == 0) {
                    
                     // Prevent to drop on file or image
@@ -222,7 +235,8 @@
             })
 
             events.$on('drop', () => {
-                this.isDragging = false
+                this.isDragging = false,
+                this.dragInProgress = false
             })
 
             events.$on('fileItem:deselect', () =>
@@ -250,6 +264,13 @@
     @import '@assets/vue-file-manager/_variables';
     @import '@assets/vue-file-manager/_mixins';
 
+    #multi-selected {
+        position: fixed;
+        pointer-events: none;
+        z-index: 100;
+        
+    }
+
     .draged-clone {
         display: none !important;
         opacity: 0 !important;

resources/js/components/FilesView/MultiSelected.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="this.moveItem ? 'move-item'  : 'wrapper'">
+    <div :class="[this.moveItem ? 'move-item'  : 'wrapper' , this.cloneElement ? 'clone' : '']">
         <div class="icon-wrapper">   
             <CheckSquareIcon class="icon" size="21"/>
         </div>
@@ -16,7 +16,7 @@ import {mapGetters} from 'vuex'
 
     export default {
         name:'MultiSelected',
-        props: ['moveItem'],
+        props: ['moveItem' , 'cloneElement'],
         components: {CheckSquareIcon},
         computed: {
             ...mapGetters(['fileInfoDetail'])
@@ -28,6 +28,9 @@ import {mapGetters} from 'vuex'
 <style lang="scss" scoped>
 @import '@assets/vue-file-manager/_variables';
 @import '@assets/vue-file-manager/_mixins';
+.clone {
+    position: relative;
+}
 
 .wrapper {
     display: flex;