How can disable first two column of header in vue-CodePudding

I am trying to disable draggable function for first 2 column i tried options in draggable

:options="{disabled : 'Subject'}"

but it disable the all header draggable functionality

<thead >
   <draggable 
      v-model="headerColumn" 
      tag="tr"
      v-bind="dragOptions"
   >
     <th 
       v-for="(header, index) in selectedColumnsHeader" 
       :key="header.title"
       :
       scope="col"
     >
       {{ header.title }}
     </th>
   </draggable>
</thead>

CodePudding user response：

Add method in draggable :move that check the header title if it match with subject it will return false and it will not be able to drag

<draggable 
  v-model="headerColumn" 
  v-bind="dragOptions"
  tag="tr"
  :move="checkHeader"
>

checkHeader(value) {
  if (value.draggableContext.element.title == 'Subject') {
     return false;
  }
  return true;
}