To use the disable option from SortableJS in a Vue project, you need to integrate SortableJS as a Vue directive or use a Vue wrapper for SortableJS. In this response, I'll show you how to use the disable option using the Vue wrapper called v-sortable which makes it easy to work with SortableJS in Vue.

Here's how you can do it:

Step 1: Install the required dependencies

First, make sure you have SortableJS and v-sortable installed in your project. You can install them using npm or yarn:

bash
npm install sortablejs v-sortable # or yarn add sortablejs v-sortable

Step 2: Register v-sortable as a Vue directive

In your main Vue file (e.g., main.js or main.ts), import and register v-sortable as a Vue directive:

javascript
import Vue from 'vue'; import vSortable from 'v-sortable'; Vue.directive('sortable', vSortable);

Step 3: Use the v-sortable directive in your Vue components

Now you can use the v-sortable directive in your Vue components. You can apply it to an element (e.g., a div) and specify the disable option to make the element non-sortable.

html
<template> <div v-sortable="sortableOptions"> <!-- Your sortable items here --> <div v-for="item in items" :key="item.id">{{ item.name }}</div> </div> </template> <script> export default { data() { return { items: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, // Add more items as needed ], sortableOptions: { // Your other SortableJS options here // ... disable: true, // Set this to true to disable sorting }, }; }, }; </script>

In the above example, the v-sortable directive is applied to the wrapping div. The sortableOptions object is passed as a parameter, and the disable option is set to true. This will make the list non-sortable, and the items will remain in their initial order.

You can modify the sortableOptions object to include other SortableJS options according to your needs. The disable option can be set to true or false dynamically based on your application logic to enable or disable sorting as required.

With these steps, you can use the disable option from SortableJS in your Vue project using the v-sortable directive.

Have questions or queries?
Get in Touch