使用SortableJS實現拖拽功能的一個優點是，它可以非常容易地與VueJS集成。SortableJS是一個輕量級和強大的JavaScript庫，它允許用戶拖拽DOM元素并排序。下面讓我們來看一下在VueJS中如何使用SortableJS庫。 首先，我們需要從JavaScript文件中導入SortableJS。可以從CDN或本地文件系統中獲取它。在VueJS組件的script部分，我們可以像這樣導入庫： ``` import Sortable from 'sortablejs'; ``` 接下來，我們需要在VueJS組件中實例化SortableJS。在VueJS的mounted方法中，我們可以創建一個新的Sortable對象并將其附加到需要進行拖拽排序的DOM元素上。例如，我們可以將其附加到一個包含列表項的無序列表： ``` mounted() { let ul = this.$el.querySelector('ul'); new Sortable(ul); } ``` 這會啟用拖拽排序功能并將其應用于我們所選擇的DOM元素。現在，用戶可以在列表項之間拖拽元素并重新排序它們。 一個更具體的示例是，讓我們假設我們有一個包含用于快速添加和刪除列表項的VueJS組件。在這種情況下，我們需要確保在添加或刪除項時，重新初始化SortableJS以更新元素的順序。VueJS提供了mounted和updated方法，其中mounted在組件掛載后調用，而updated在組件更新后調用。因此，我們可以使用以下代碼重新初始化SortableJS： ``` export default { mounted() { this.initSortable(); }, updated() { this.initSortable(); }, methods: { initSortable() { let ul = this.$el.querySelector('ul'); if (ul._sortable) { ul._sortable.destroy(); } ul._sortable = new Sortable(ul); }, addItem() { this.items.push({text: 'New Item'}); }, removeItem(index) { this.items.splice(index, 1); } } } ``` 在這里，我們首先查詢包含列表項的DOM元素。如果SortableJS對象已經存在，則我們使用destroy方法移除它，并重新創建它以更新元素的新順序。addItem和removeItem方法被添加到VueJS組件中以處理在列表中添加或刪除項的邏輯。 總的來說，SortableJS是一個非常有用的JavaScript庫，它可以很容易地與VueJS集成，使您可以輕松地實現拖拽排序功能。通過初始化SortableJS對象并將其附加到需要進行拖拽排序的DOM元素上，您可以為VueJS應用增加許多動態交互效果，大大增強用戶體驗。