CODEWITHSUNDEEP
vue.js
D'Mar
D'Mar

Reputation: 61

Is there a way to enable/disable draggable functionality with Vue.Draggable?

I have a scenario where the wrapped elements should only be draggable upon meeting certain conditions. I handled it in the HTML like this:

<draggable v-if='somePassingConditions'>
<my-component></my-component>
</draggable>
<my-component v-else></my-component>

I'm trying to not put the if-else condition in the template. Is there a way to enable or disable the drag functionality with Vue.Draggable? Thanks

Upvotes: 0

Views: 3081

Answers (1)

smetanamolokovich
smetanamolokovich

Reputation: 427

Try this:

 <draggable :disabled='somePassingConditions'>
   <my-component></my-component>
 </draggable>

Here is an example from draggable offical repo: https://github.com/SortableJS/vue.draggable.next/blob/master/example/components/simple.vue

Also this link may be helpful: https://sortablejs.github.io/vue.draggable.next/#/simple

Upvotes: 3

Related Questions