Vue Draggable, mark elements as undraggable?

318 Views Asked by At

I've scoured the documentation and the github forum, and I could be mistaken, but as far as I can tell there is no possibility to exclude specific elements from being draggable in Vue Draggable for Vue2.

I know there is the handle option and class, which can make specific part(s) draggable, but I have a v-list-item which I want to make draggable, except for some v-text-fields within it. So i'd like to mark these elements as undraggable.

So this is probably more a feature-request, than something that can be done right now (but maybe it is?). The new feature would be something like <draggable v-model="..." exclude=".exclude-draggable">

Does this make any sense?

Update: In this scenario the undraggable parts are nested within

<v-list>
    <draggable v-model="..." exclude=".exclude-draggable">
        <v-list-item v-for...>
            <div>
                I am draggable...
            </div>
            <v-text-field
               Don't drag me!
            />
        </v-list-item>
    </draggable>
</v-list>
1

There are 1 best solutions below

1
supremesector On

I've done this in a previous project - you can use the use the :not operator on the draggable option to exclude elements by class:

<draggable v-model="ListOfDraggableItems" draggable=".dragclass:not(.dontdragclass)">
                                          
   <dragme class="dragclass"></dragme>
   <dontdragme class="dontdragclass"></dontdragme>
                                          
</draggable>