我正在使用Vue可拖动插件重新整理照片顺序。问题是我无法拖动照片预览和单选按钮，照片名称没有问题。
这是我的代码：
ReorderableListView当我拖动一行时，不会拖动照片预览（标签<template>
<div class="shadow-1 q-pb-lg">
<i aria-hidden="true" class="q-icon q-uploader-pick-button self-
center q-if-control relative-position overflow-hidden material-
icons">add<input id="files" ref="files" type="file"
multiple="multiple" class="q-uploader-input absolute-full cursor-
pointer" v-on:change="handleFilesUpload()"></i>
<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" :options="
{group:'people'}">
<div v-for="(element,index) in files">
{{element.name}} --- <img class="q-item-image item_drag" v-
bind:ref="'image'+parseInt( index )" :alt="element.name"/> ---- <q-radio v-model="carProfilePicture" :val="key" :id="file.name" class="item_drag"/>
<button @click="removeFileBeforeUpload(index)">X</button>
</div>
</draggable>
</div>
</div>
</div>
</template>
<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] );
this.drag.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] );
}
}
},
）和单选按钮，但是会拖动照片名称（img）。