Tips for automatically updating the "order" attribute of an item within VueDraggable

Question

Tips for automatically updating the "order" attribute of an item within VueDraggable

Looking for guidance on how to update the order of items after a drag and drop functionality in Vue3 using vue draggable. The library used can be found at https://github.com/SortableJS/vue.draggable.next.

  "items": [
    {
      "name": "Test - 1",
      "order": 0
    },
    {
      "name": "Test - 2",
      "order": 1
    },
    {
      "name": "Test - 3",
      "order": 2
    }
  ]
}

If I were to move Test - 2 to the top, the updated result should look like this:

  "items": [
    {
      "name": "Test - 2",
      "order": 0
    },
    {
      "name": "Test - 1",
      "order": 1
    },
    {
      "name": "Test - 3",
      "order": 2
    }
  ]
}

javascript vue.js frontend vuejs3 vuedraggable

Answer 1

Answer №1

simply iterate through the items every time the order changes
here's a complete working example:

<template>
    <draggable :list="items" 
               item-key="name"
               @change="onChange">
        <template #item="{ element }">
            <div class="list-group-item">
                {{ element.name }}
            </div>
        </template>
    </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
    components: {
        draggable,
    },
    data() {
        return {
            items: [
                {
                    name: 'Test - 1',
                    order: 0,
                },
                {
                    name: 'Test - 2',
                    order: 1,
                },
                {
                    name: 'Test - 3',
                    order: 2,
                },
            ],
        }
    },
    methods: {
        onChange(event) {
            this.reorder()
        },
        reorder() {
            this.items.forEach((item, index) => (item.order = index))
        },
    },
}
</script>

https://i.sstatic.net/AFW8l.gif

Answer 2

simply iterate through the items every time the order changes
here's a complete working example:

<template>
    <draggable :list="items" 
               item-key="name"
               @change="onChange">
        <template #item="{ element }">
            <div class="list-group-item">
                {{ element.name }}
            </div>
        </template>
    </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
    components: {
        draggable,
    },
    data() {
        return {
            items: [
                {
                    name: 'Test - 1',
                    order: 0,
                },
                {
                    name: 'Test - 2',
                    order: 1,
                },
                {
                    name: 'Test - 3',
                    order: 2,
                },
            ],
        }
    },
    methods: {
        onChange(event) {
            this.reorder()
        },
        reorder() {
            this.items.forEach((item, index) => (item.order = index))
        },
    },
}
</script>

https://i.sstatic.net/AFW8l.gif

Tips for automatically updating the "order" attribute of an item within VueDraggable

Answer №1

Similar questions

Creating a cube with unique textures on each face in three.js r81: What's the best way to achieve this?

yii2: What could be causing my JavaScript registration issue in Heroku?

JavaScript validation for radio buttons that are grouped together

Issues have been encountered with activating checkboxes on Internet Explorer while utilizing ASP.NET CheckBox controls

I'm having trouble locating the documents I recently saved in my mongoose model

Mastering the art of sorting HTML tables with various columns using JavaScript and jQuery

Is it possible to use Three.js camera lookAt function without any rolling?

tips for transitioning between various json entities

Using JavaScript and AJAX to manage and control a shell interface

Structure of Sencha Touch application

What could be causing the value of response.name to be undefined in this situation?

Benefits of Utilizing Object.create

Node.JS function using try catch block

What is the reason behind Express serving the static file through the router, while also causing the path to the scripts folder to

Enrollment in the course is conditional on two words being a perfect match

Could you kindly double-check the app id setting before executing npm run dev to avoid any issues?

What causes the mounted hook in Vue to be triggered multiple times when used within a plugin or mixin?

The React Context Value keeps coming back as undefined every time

Utilize the Google Drive API to easily upload an Excel file

Cloud Firestore query error in Firebase Cloud Function despite data being present in Cloud Firestore