jQuery.sortable是一個基于jQuery實現(xiàn)的可拖拽排序插件，它可以方便地實現(xiàn)在列表中拖拽元素的排序功能。在Vue.js中，通過與jQuery.sortable的結(jié)合使用，可以快速簡便地實現(xiàn)這一功能。

在使用jQuery.sortable前，需要先引入jQuery和jQuery.sortable庫。在Vue.js中，可以通過Vue-CLI的module bundler來管理依賴關(guān)系，這可以通過npm命令行來實現(xiàn)。在終端中運行以下命令：

npm install jquery
npm install sortablejs

接著，在使用sortable時，需要先將其掛載到Vue實例上。在Vue的created鉤子函數(shù)中，可以使用以下代碼來實現(xiàn)：

import Sortable from 'sortablejs'
export default {
created() {
this.sortable = Sortable.create(this.$refs.todoList, {
animation: 150,
onEnd: this.onEnd
})
},
methods: {
onEnd({ newIndex, oldIndex }) {
console.log(newIndex, oldIndex)
// 更新數(shù)組中的元素順序
// ...
}
}
}

這里的例子中，$refs.todoList指向一個

的DOM元素，代表待排序的列表。animation屬性控制拖拽排序時的過渡時間，onEnd是在拖拽結(jié)束時觸發(fā)的回調(diào)函數(shù)，它會返回排序前和排序后的元素下標。這個回調(diào)函數(shù)可以根據(jù)排序后的順序來更新Vue實例中相應(yīng)的數(shù)據(jù)。

在拖拽排序時，我們還可能需要處理一個問題：如果列表中有一些元素不允許被拖拽怎么辦？在sortable中，可以通過指定disabledClass屬性來實現(xiàn)禁用某些元素的拖拽排序功能。在Vue.js中，可以使用computed屬性來指定這個屬性。例如：

export default {
computed: {
disabledClass() {
return this.myData.map(item =>{
return item.disabled ? 'disabled' : ''
})
}
}
}

這里的myData是一個包含數(shù)據(jù)的數(shù)組，其中元素的disabled屬性表示該元素是否禁用拖拽功能。在computed屬性中，我們可以通過map函數(shù)將disabled屬性轉(zhuǎn)化為CSS類名，以實現(xiàn)禁用拖拽功能的目的。然后，在sortable中，將disabledClass屬性賦值給disabled屬性即可：

export default {
created() {
this.sortable = Sortable.create(this.$refs.todoList, {
animation: 150,
onEnd: this.onEnd,
disabled: this.disabledClass
})
}
}

除了基本的拖拽排序功能外，sortable還提供了其他一些特色功能。例如，在拖拽過程中，可以對元素進行更細致的控制，比如將某個元素視作占位符，比如限制哪些元素可以被拖拽，等等。這些功能可以通過sortable的API來實現(xiàn)，具體的使用方法可以參考sortable官方文檔。

總之，通過Vue.js和jQuery.sortable的結(jié)合使用，我們可以很方便地實現(xiàn)拖拽排序功能，并且還能夠定制化地控制元素的拖拽行為，使得頁面擁有更好的用戶體驗。