Add support for drag and drop reordering of uploaded files

[chrispappas]

This component looks really great, one thing that would be a killer feature would be the ability to reorder the uploads using drag and drop.

A number of projects I'm working on could really use an uploader component like this, but we need to offer the ability for users to upload in a specific order, to avoid requiring a second reordering step post-upload.

[safrazik]

Sounds like a good suggestion. I will consider supporting it in the future. Currently it can be implemented with the help of slots.

[Turbotailz]

+1 for re-ordering!

Any chance of an example using slots?

[safrazik]

OK I am trying to implement a drag sort example with the famous VueDraggable component from Sortable Js
I will update you when the example is ready.

[safrazik]

@chrispappas and @Turbotailz so the "killer feature" is finally there officially! 🎁
from version 1.4.0. You can see it working on the demo site: https://safrazik.github.io/vue-file-agent/ Learn more here.
After a lot of testing with available solutions, I made it work with vue-slicksort.

// npm install vue-slicksort --save

import { SlickList, SlickItem } from 'vue-slicksort';

Vue.component('vfa-sortable-list', SlickList);
Vue.component('vfa-sortable-item', SlickItem);

vfa-sortable-list and vfa-sortable-item components should be defined for sortable to work

      <VueFileAgent
       ...       
        :sortable="true"
        @sort="onSort($event)"
        ...
      ></VueFileAgent>

Thanks for bringing this up!

[chrispappas]

Awesome! Love that you took the time to implement this feature. Thank you so much.

…

On Wed, Nov 27, 2019, 9:08 AM Safraz Razik ***@***.***> wrote: @chrispappas <https://github.com/chrispappas> and @Turbotailz <https://github.com/Turbotailz> so the *"killer feature"* is finally there officially! 🎁 from version 1.4.0 <https://github.com/safrazik/vue-file-agent/releases/tag/1.4.0>. Learn more here <https://safrazik.github.io/vue-file-agent/docs/#sortable>. After a lot of testing with available solutions, I made it work with vue-slicksort <https://github.com/Jexordexan/vue-slicksort>. // npm install vue-slicksort --save import { SlickList, SlickItem } from 'vue-slicksort'; Vue.component('vfa-sortable-list', SlickList); Vue.component('vfa-sortable-item', SlickItem); vfa-sortable-list and vfa-sortable-item components should be defined for sortable to work <VueFileAgent ... :sortable="true" @sort="onSort($event)" ... ></VueFileAgent> Thanks for bringing this up! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#20?email_source=notifications&email_token=ABD2GE3RAMEWETCTAEGFZ3LQV2EPNA5CNFSM4I7D2JCKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFJZOIQ#issuecomment-559126306>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABD2GEY2C6CGXB3XFA3E4LLQV2EPNANCNFSM4I7D2JCA> .

[Turbotailz]

I'm trying the demo but having no luck with the dragging, where is the handle to drag each item? I managed to re-order one after a lot of trial and error but couldn't do it again.

[safrazik]

@Turbotailz you have to taphold/click&hold and drag for this to work. But looking at your comment, I'm thinking of a proper implementation. What do you think? Can you please open another issue?

[Turbotailz]

Ah! Works flawlessly given that info 😅

Yes I will make another issue.