sortablejsvue

 

SortableJS是一个功能强大的JavaScript库，可以通过拖拽方式对元素进行排序和重新排列。它基于HTML5的原生拖拽功能，并且与Vue.js框架很好地集成在一起，可以轻松地为我们的Vue应用添加拖放排序的功能。

 

首先，我们需要在项目中引入SortableJS和Vue.js，可以通过CDN引入，也可以使用npm安装：

 

```

npm install sortablejs

```

 

然后，在Vue组件中导入SortableJS，并创建一个新的Sortable实例：

 

```javascript

import Sortable from 'sortablejs';

 

export default {

data() {

return {

items: [

{ id: 1

name: 'Item 1' }

 

{ id: 2

name: 'Item 2' }

 

{ id: 3

name: 'Item 3' }

 

// ...

]

};

}

 

mounted() {

new Sortable(this.$refs.list

{

draggable: '.item'

 

onEnd: this.onSortEnd

});

}

 

methods: {

onSortEnd(event) {

const movedItem = this.items.splice(event.oldIndex

1)[0];

this.items.splice(event.newIndex

0

movedItem);

// 可以在此处发送到服务器进行排序的更新

}

}

}

```

 

在上面的代码中，我们使用SortableJS创建了一个新的Sortable实例，并将其绑定到Vue组件的根元素上。我们通过`draggable`选项指定可拖拽的元素的选择器，这里我们使用`.item`来指定每个项都可以拖拽。

 

在Sortable实例的`onEnd`事件中，我们可以获取拖拽结束时的相关信息。我们可以根据事件中的`oldIndex`和`newIndex`属性，从`items`数组中移动和插入项，以实现排序的更新。在实际项目中，你可以在这里发送到服务器进行排序的更新。

 

接下来，在Vue的模板中使用`v-for`指令来渲染项目列表，并将每个项目绑定到相应的DOM元素上：

 

```html

```

 

这样，我们就可以在Vue应用中使用SortableJS来实现拖拽排序的功能了。

 

SortableJS还提供了许多其他的选项，如设置拖拽时的样式、限制拖拽的范围和方向、设置拖拽触发的手势等。你可以参考官方文档以了解更多功能和用法：https://sortablejs.github.io/Sortable/

 

总之，SortableJS是一个非常实用的库，可以轻松为Vue应用添加拖拽排序的功能。通过对排序事件的监听和数组操作，我们可以方便地实现对元素的拖拽排序和重新排列。无论是创建一个简单的任务列表，还是一个复杂的可定制化页面，SortableJS都能够帮助我们实现交互性强的拖拽排序效果。