List Sorting with VueJS Drag and Drop功能

Question

List Sorting with VueJS Drag and Drop功能

I'm currently utilizing the Vue.Draggable plugin to create a draggable list feature. I have a sorted computed property being passed in this way:

data(){

  return {

   paymentMethods: [
     { name: 'stripe', Dindex: 0, state: 2 },
     { name: 'paypal', Dindex: 1 , state: 1 },
     { name: '2checkout', Dindex: 2, state: 4 },
     { name: 'cod', Dindex: 3, state: 3 }
   ],
  }
},

computed: {

  payments() {
    return _.sortBy(this.paymentMethods, 'state');
  },
}

Here is the Drag and Drop List setup:

<draggable :list="payments" class="payment-methods" tag="ul" @start="drag=true" @end="drag=false" @change="indexChanged">
   <li v-for="(method, index) in payments" :key="index">
        <!-- list data -->
   </li>
</draggable>

The issue arises from the fact that the draggable functionality does not work as expected due to the manual sorting through lodash's _.sortBy. My question is how can I implement sorting within a draggable list.

javascript vue.js vue.draggable

Answer 1

Answer №1

After some experimentation, I've found that even though the list is a computed value, it gets sorted again when you drag it. To avoid this unnecessary sorting, my suggestion is to sort the list only once when it is mounted:

data() {
  return {
    payments: [],
    paymentMethods: [
        { name: 'stripe', Dindex: 0, state: 2 },
        { name: 'paypal', Dindex: 1 , state: 1 },
        { name: '2checkout', Dindex: 2, state: 4 },
        { name: 'cod', Dindex: 3, state: 3 }
    ],
  }
}
mounted() {
    payments = _.sortBy(this.paymentMethods, 'state');
}

Answer 2

After some experimentation, I've found that even though the list is a computed value, it gets sorted again when you drag it. To avoid this unnecessary sorting, my suggestion is to sort the list only once when it is mounted:

data() {
  return {
    payments: [],
    paymentMethods: [
        { name: 'stripe', Dindex: 0, state: 2 },
        { name: 'paypal', Dindex: 1 , state: 1 },
        { name: '2checkout', Dindex: 2, state: 4 },
        { name: 'cod', Dindex: 3, state: 3 }
    ],
  }
}
mounted() {
    payments = _.sortBy(this.paymentMethods, 'state');
}

Answer 3

Answer №2

While this solution may seem outdated, my attempts to search for an alternative through Google yielded no results. After a brief moment of contemplation, I devised the following:

// Custom Drag and Drop Component

<draggable
    class="drag-wrapper selected-cols"
    v-bind="dragOptions"
    ...other props
    @change="colChange"
>
    <div v-for="(col, i) in availableColumns" :key="col.name + '-' + i">
        <div class="drag-area">
            {{ col.label }}
        </div>
    </div>
</draggable>


// Script Section

methods: {
    colChange(e) {
        this.availableColumns.sort((a, b) =>
           a.label.localeCompare(b.label));
        },
    },

Instead of relying on a computed property for sorting, I opted to perform the sorting within the @change event listener as it is triggered post-vuedraggable reordering.

Answer 4

While this solution may seem outdated, my attempts to search for an alternative through Google yielded no results. After a brief moment of contemplation, I devised the following:

// Custom Drag and Drop Component

<draggable
    class="drag-wrapper selected-cols"
    v-bind="dragOptions"
    ...other props
    @change="colChange"
>
    <div v-for="(col, i) in availableColumns" :key="col.name + '-' + i">
        <div class="drag-area">
            {{ col.label }}
        </div>
    </div>
</draggable>


// Script Section

methods: {
    colChange(e) {
        this.availableColumns.sort((a, b) =>
           a.label.localeCompare(b.label));
        },
    },

Instead of relying on a computed property for sorting, I opted to perform the sorting within the @change event listener as it is triggered post-vuedraggable reordering.

List Sorting with VueJS Drag and Drop功能

Answer №1

Answer №2

Similar questions

Create a variety of elements in real-time

Tips on adjusting a position that shifts with changes in window size

Is there a way to alter the color of a button once it has been clicked?

The extended class possesses a distinct type from the base class, which is reinforced by an interface

Navigating through the realm of Android development entails understanding how to manage a multi-object function in JavaScript when using

Is there a way to dynamically add <td> based on the quantity of values in a JSON object?

Evaluating text presence with Nightwatch and Selenium by checking for single quotes in an element

Redux export does not complete correctly unless brackets are used

Show HTML content from different domains within a navigation tab's content area

Enhance global variable by appending a line from a local function in Javascript

Having trouble loading a React component

Utilize a store from outside a VueJS component

To link circles vertically with a line and fill them with color when clicked, follow these steps:

Issue: the module '@raruto/leaflet-elevation' does not include the expected export 'control' as imported under the alias 'L' . This results in an error message indicating the absence of exports within the module

What is the best way to eliminate "?" from the URL while transferring data through the link component in next.js?

Do not fetch data again after a re-render

Exploring the world of promise testing with Jasmine Node for Javascript

Setting up Geolocation

Identifying the FireOS version using JavaScript

Retrieve the id of the clicked hyperlink and then send it to JQuery