How to use the disable option from SortableJS in Vue project?

Viewed 109

I am using element-ui-el-table-draggable to achieve the draggable effect on my el table, and it is working very fine.

Now, I want to use the disable option from SortableJS, but I dont know how to put these together. Please check the below links.

Github for Sortable and please search for "disable option"

Live demo for disable option

Is this possible to do so? I am using Vue 2.6.11

Thanks a lot! Happy new year of 2022!

        <el-button type="primary" @click="switchState">{{ Disable }}</el-button>
        <p class="p-3" v-if="departmentlist">
          <ElTableDraggable>
            <el-table
              stripe
              class="table-responsive table"
              header-row-class-name="thead-light"
              :data="departmentlist"
              @row-click="row_clicked_event">
              <!-- <el-table-column label="ID" prop="IDn">
                <template v-slot="{ row }">
                  {{ row.IDn }}
                </template>
              </el-table-column> -->
              <el-table-column label="PLU" prop="PLU" :key="PLU"> </el-table-column>
              <el-table-column :label="$t('Name') + '1'" prop="Name1" :key="$t('Name') + '1'">
              </el-table-column>
              <el-table-column :label="$t('Name') + '2'" prop="Name2" :key="$t('Name') + '2'">
              </el-table-column>
              <el-table-column :label="$t('Sort Order')" prop="SortOrder" :key="$t('Sort Order')">
              </el-table-column>
              <el-table-column :label="$t('Remarks')" prop="Remarks" :key="$t('Remarks')">
              </el-table-column>
            </el-table>
          </ElTableDraggable>
        </p>
        <p class="p-3" v-else>
          {{ $t("No Records") }}
        </p>


<script>
import ElTableDraggable from 'element-ui-el-table-draggable'

export default {
  components: {
    ...
    ElTableDraggle
  },
  data() {
    ...
  },
  methods:{
    switchState(){
      // This should be where the magic happens I think
    }
  },
}
</script> ```
1 Answers

To disable the sortable list, you have to add disabled: true as second argument.

var sortable = Sortable.create(list, {
  disabled: true
});
Related