Dragging and Dropping

To enable the drag-and-drop feature of the ListBox, set its draggable property to true.

You can also customize the drag-and-drop behavior of the ListBox by using its draggable.placeholder and draggable.hint options.

Currently, the drag-and-drop functionality is not available for multiple selected items.

<div id="vueapp" class="vue-app">
    <kendo-listbox :data-source=dataSourceArray
                   :data-text-field="'country'"
                   :data-value-field="'id'"
                   :selectable="'multiple'"
                   :draggable=true                 
                   :toolbar-tools="['moveUp', 'moveDown', 'remove']">
    </<kendo-listbox>
</div>
Vue.use(ListBoxInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            dataSourceArray: [
                { country: "Germany", id: 1 },
                { country: "France", id: 2 },
                { country: "Italy", id: 3 },
                { country: "Spain", id: 4 },
                { country: "Hungary", id: 5 }
            ],

        }
    }
})

In this article