vue的draggable屬性是一個非常有用且易于使用的指令，它允許用戶通過拖拽來重新排列他們的元素。這個指令是基于Sortable.js創建的，它提供了一個包裝器來簡化Sortable.js的用法，并使之成為更加適合vue的方式。

Vue.directive('draggable', {
inserted: function (el, binding) {
new Sortable(el, binding.value || {})
}
})

上述代碼展示了如何將draggable指令添加到Vue中。這個指令在元素插入文檔樹中時被調用，然后根據傳遞給它的選項，創建了一個新的Sortable.js實例。這個實例可以返回重排后的結果或者在列表被重排后調用回調函數。

為了理解draggable指令的使用，下面是一個例子，它演示了如何通過拖拽來重排一個列表：

上述代碼中，我們在每個列表項上添加了v-draggable指令，并在其中傳遞了一個onUpdate回調函數。當用戶拖拽一個列表項并放下時，onUpdate回調函數將被觸發。在這個回調函數中，我們使用Sortable.js返回的newIndex和oldIndex屬性來計算出被拖拽的元素在新列表中的位置，并更新數據模型來反映這個改變。這樣做不僅簡單易懂，而且非常高效。

總之，draggable屬性是一個功能強大和易于使用的指令，它允許我們通過拖拽來重排我們的元素。在實踐中，它可以用來創建復雜的拖拽行為，例如拖拽排序、拖拽放置、拖拽縮放等等。文檔在這里。