Discussion :

[stomerfull]

Bonjour ,

Mon but est de pouvoir changer l'ordre des éléments qui s'affiche dans une liste, les éléments en question sont des photos uploadées avec un input type file multiple
J'utilise ce plugins Vue JS pour de dragg https://github.com/SortableJS/Vue.Draggable/

Le problème c'est que ça marche sur le nom de l'image mais pas sur la photo lui même

Voici mon code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
 
<input id="files" ref="files" type="file" multiple="multiple" class="q-uploader-input absolute-full cursor-pointer" v-on:change="handleFilesUpload()">
 
<div class="row q-my-xg gutter-md">
           <div class="col-lg-7 col-md-8 col-xs-10">
 
              <draggable v-model="files" class="dragArea">
                <div class="q-list q-uploader-files q-py-none scroll" v-for="(file, key) in files">
                    <div class="q-uploader-file q-pa-xs q-item q-item-division relative-position">
 
                        <div class="q-uploader-progress-text absolute">100%</div>
                        <div class="q-item-side q-item-section q-item-side-left">
                           <q-radio v-model="carProfilePicture" :val="key" :id="file.name"/>
                        </div>
 
                        <div class="q-item-side q-item-section q-item-side-left">
                          <img class="q-item-image" v-bind:ref="'image'+parseInt( key )" :alt="file.name"/>
                        </div>
 
                        <div class="q-item-main q-item-section">
                            <div class="q-item-label" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;">{{ file.name }}</div>
                        </div>
                        <div class="q-item-side q-item-section q-item-side-right">
                        <i aria-hidden="true" class="q-icon cursor-pointer material-icons text-primary q-item-icon" v-on:click="removeFileBeforeUpload( key )">cancel</i>
                        </div>
                    </div> 
                </div>
              </draggable>
 
          </div>
       </div>
     <script>
'use strict'
 
import { mapState } from 'vuex';
 
import draggable from 'vuedraggable';
 
const querystring = require('querystring');
 
export default {
    name : 'UploadPhotoForm',
    components : {
       draggable,
    },
    data () {
        return {
            carProfilePicture: '',
            testa : '',
            url: this.getBaseUrl() + 'listings/import-photo',
            hide: true,
            preUploadFile: [],
            files: [],
            uploadedFile : {
                idFile : ''
            },
            profilePicFile : {
                idFile : ''
            }
        }
    },
    computed : {
          assets() {
            return process.env.APP_FO_ASSETS
          },
 
          baseUrl() {
            return process.env.APP_FO_BASEURL
          },
 
          ...mapState({
            userInfo : state => state.user.userInfo
          })
    },
    methods : {
      handleFilesUpload(){
         let uploadedFiles = this.$refs.files.files;
 
         //Adds the uploaded file to the files array
         for( var i = 0; i < uploadedFiles.length; i++ ){
              this.files.push( uploadedFiles[i] );
         }
 
         //Generate image previews for the uploaded files
         this.getImagePreviews();
      },
      //Gets the preview image for the file.
      getImagePreviews(){
 
        //Iterate over all of the files and generate an image preview for each one.
        for( let i = 0; i < this.files.length; i++ ){
 
          //Ensure the file is an image file
          if ( /\.(jpe?g|png|gif)$/i.test( this.files[i].name ) ) {
 
            //Create a new FileReader object
            let reader = new FileReader();
 
            /*
              Add an event listener for when the file has been loaded
              to update the src on the file preview.
            */
            reader.addEventListener("load", function(){
              this.$refs['image'+parseInt( i )][0].src = reader.result;
            }.bind(this), false);
 
            /*
              Read the data for the file in through the reader. When it has
              been loaded, we listen to the event propagated and set the image
              src to what was loaded from the reader.
            */
            reader.readAsDataURL( this.files[i] );
          }
        }
      },

Le probleme se situe sur la partie getImagePreviews() , les images previews ne sont pas dans la boucle v-for="(file, key) in files mais sont gérer par <img class="q-item-image" v-bind:ref="'image'+parseInt( key )" :alt="file.name"/> .

Si je monte une ligne en la draggant , les photos ne bougent pas mais c'est le nom de la photo qui répond au drag

Merci pour votre aide

[stomerfull]

il faudrai que j'ajoute :key="file.name" ici

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

div class="q-list q-uploader-files q-py-none scroll" v-for="(file, key) in files" :key="file.name">

pour que ça marche