Feature request: to be able to enable / disable draggable

[johnvuko]

Hello, I would like to be able to enable / disable the draggable feature and just act as a simple div for example. The reason is to avoid to rebuild / redraw the elements inside and so have better performance.

Currently I have something like this:

<button
  v-text="Edit"
  @click="editing = !editing" />

<draggable
   v-if="editing"
   v-model="reorderedObjects"
   item-key="id">
   <template #item="{element}">
      <y-widget
         :widget="element"
         :editing="editing" />
   </template>
</draggable>
<div v-else>
   <y-widget v-for="object in reorderedObjects"
      :key="object.id"
      :widget="object"
      :editing="editing" />
</div>

My problem is in my component y-widget make an expensive HTTP request (which I could / would not do anywhere else). Everytime I switch the editing variable, it'is a new widget and there is a new HTTP request.

Just for performance the ability to avoid to redraw can justify this feature, which doesn't seems to complex.

And using disabled on draggable only works the first time.

[gregfr]

That would be nice feature! Is there currently a workaround, beside the trick you gave?

[mreduar]

That would be nice feature! Is there currently a workaround, beside the trick you gave?

<draggable
   :disabled="true"
   v-model="reorderedObjects"
   item-key="id">
   <template #item="{element}">
      <y-widget
         :widget="element"
         :editing="editing" />
   </template>
</draggable>

disabled: true // Disables the sortable if set to true.