Vue Sortable List

Posted on  by admin

Preview:

Modified5 years, 11 months ago. I am trying to bind a sortable list in Vue.js, but the underlying data list is not updated:.

Install & Download:

  • 135135 bronze badges. 24.9k2020 gold badges9696 silver badges119119 bronze badges. 9696 silver badges119119 bronze badges.
  • Working Vue.js Sortable jsFiddle: https://jsfiddle.net/crabbly/vhsd3wwu/.
  • 11 gold badge1818 silver badges4545 bronze badges.
  • 4545 bronze badges. In this article we are going to create a simple sortable list using Vue JS.(However you would like to create an advanced project like shown in the cover photo you can follow this VueJS tutorial series that I have started.) .
  • Okay lets start by using v-for directive to create a simple list.
  • The output should look something like thisBut the list is not sortable so let make is sortable now.

Download Details:

How to use it:

To do that we are going to use Vue.Draggable so install it by running npm i vuedraggable.Now you can import it and use it like a component.So to make our list sortable we simply have to wrap our list with draggable and we also have to use our todos for its v-model.

  • Now you will se you can now drag your todos to sort themAlso If you want you can specify a handle for sorting(the element that you will drag to sort the list).
  • Finally You can use transition-group to add some animation. So now if you try to sort your todos you will see they animates their position.
  • That's all for now and Thanks for reading. Be sure to check out my other articles and My YouTube Channel.
  • For further actions, you may consider blocking this person and/or reporting abuse.
  • This is a virtual scrolling list component that can be sorted by dragging an item in the list (drag and drop sorting) and the individual items can have custom styles.
  • Import and register the component.

Description:

Add the virtual-drag-list component to the template and define the data list.

Available component props. Available item slot props.

Live Demo: https://mfuu.github.io/vue-virtual-drag-list/. Download Link: https://github.com/mfuu/vue-virtual-drag-list/archive/refs/heads/main.zip.

Official Website: https://github.com/mfuu/vue-virtual-drag-list.

Install & Download:

You Might Be Interested In: