Building Applications with Spring 5 and Vue.js 2

Implementing drag and drop

Dragging and dropping elements on the page has become a common user experience nowadays. There are many libraries to help developers implement this feature with ease. We will use Vue.Draggable (https://github.com/SortableJS/Vue.Draggable), which is a Vue component based on the Sortable.js library (https://github.com/RubaXa/Sortable).

After installing it via the npm install vuedraggable --save command, we will need to import it into BoardPage.vue, as follows:

    <script>import draggable from 'vuedraggable'...export default {  name: 'BoardPage',  ...  components: {    ...    draggable  },  ...}</script>

To make the card lists support drag and drop, we will need to wrap the .list-wrapper elements as follows:

<div class="board-body"> ...