Vue.draggable: Ignoring element within Draggable

[jesseschutt]

First off, thanks for your work on this very helpful component! And secondly, please forgive my ignorance if this is an easy answer.

I would like to include an element within the draggable component that is completely ignored and unsortable. Since draggable wraps the sortable elements I need to put my extra element within <draggable> in order to lay out the page properly. However, I'm finding that including the element is messing with the sorting order.

<draggable :list="albums"
           element="div"
           :options="{filter: '#createAlbum'}"
>
    <div v-for="album in albums"
         is="AlbumCreatorAlbum"
         :album="album"
    ></div>// Sortable elements
    <add-album></add-album> // My custom element that I want at the end of the draggable list and should not sort
</draggable>

Is this currently possible? I'd appreciate any insight you may offer! Thank you 👍

[David-Desmaisons]

Hello @gibson, you should try draggable option
Something like this:

<draggable :list="albums"
               element="div"
               :options="{draggable : '.creator'}">
        <div v-for="album in albums" class="creator"
             is="AlbumCreatorAlbum"
             :album="album"></div>
        // Sortable elements
        <add-album></add-album>
        // My custom element that I want at the end of the draggable list and should not sort
</draggable>

[David-Desmaisons]

@gibson , Did this tip work for you?

[jesseschutt]

I think you are talking to me, right? :-)

I think I need to try replicating this in a fiddle in order to show what was happening... but I used both the filter and draggable options, which did make the <add-album> sit at the end of the list, however, its presence seemed to mess up the :list in draggable.

When I would inspect albums after sorting, they would be out of order from what the dom was showing.

Let me build a fiddle and get back to you. Thanks for following up!

[jesseschutt]

@David-Desmaisons I was able to replicate the problem here: https://jsfiddle.net/tgjvzwvn/1/

Thanks for taking a look! 👍

[sunilkumarverma]

HI @David-Desmaisons i have 4 type status wise block , but from block1 it can go to block 2 but can'nt go to block 3 or fourth , how i can stop the drop event as well as darg item to his original array.

Any help will be appreciated

[David-Desmaisons]

@jschutt , I play around with your jsfiddle and I was able to reproduce the problem.

It seems that the work-around I proposed is not working.
I don't think I can do something because it is due to the way Vue is rendering v-for element.

So as a work-arround:
1) Keep the add element out-side the draggable component (you will have to ajust you css but it should be the easiest and most straigthp-forward solution )

<draggable :list="albums"
               element="div"
               :options="{draggable : '.creator'}">
        <div v-for="album in albums" class="creator"
             is="AlbumCreatorAlbum"
             :album="album"></div>

</draggable>
<add-album></add-album>

2) Use "is" to have the add-album as in the v-for loop:

<draggable :list="albumsAndAdd"
               element="div"
               :options="{draggable : '.creator'}">
        <div v-for="album in albumsAndAdd" class="creator"
             :is="album.type"
             :album="album.album"></div>
</draggable>

where albumsAndAdd will contains album and a element at the representing the add behaviour

[David-Desmaisons]

@sunilkumarverma , create a new issue with jsfidlle and complete descroption of your problem that is not related to this issue.