vue2.0使用Sortable.js实现的拖拽功能示例

实现拖拽功能是现代Web应用中常见的需求之一，而Vue.js是目前最受欢迎的JavaScript框架之一。在Vue.js中，我们可以使用第三方库Sortable.js来完成拖拽功能的实现。

下面是实现“vue2.0使用Sortable.js实现的拖拽功能示例”的攻略：

准备工作

1. 使用Vue CLI创建一个新的Vue.js项目。

bash
vue create sortable-demo

1. 安装Sortable.js库。

bash
npm install --save sortablejs

1. 在Vue组件中引入Sortable.js库。

javascript
import Sortable from 'sortablejs';

实现拖拽功能

1. 在Vue组件的template标签中添加一个包含多个子元素的容器元素，这些子元素可以被拖拽。

html
<template>
<div class="container">
<div class="item" v-for="(item, index) in items" :key="index">{{ item }}</div>
</div>
</template>

1. 在Vue组件的mounted钩子函数中，使用Sortable.js创建一个Sortable实例，将容器元素传递给它，并设置拖拽的配置选项。

javascript
mounted() {
const container = this.$el.querySelector('.container');
this.sortable = Sortable.create(container, {
animation: 150,
onEnd: this.onSortEnd,
});
},

1. 在Vue组件的methods选项中，添加一个处理拖拽结束事件的方法。

```javascript
methods: {
onSortEnd(event) {
const itemEl = event.item;
const newIndex = event.newIndex;
const oldIndex = event.oldIndex;

   // 在这里更新数据
 },

},
```

1. 在onSortEnd方法中，可以通过event参数获取拖拽的相关信息，如拖拽元素的旧索引和新索引。根据这些信息，可以使用Vue.js的响应式数据功能，更新数据。

```javascript
onSortEnd(event) {
const itemEl = event.item;
const newIndex = event.newIndex;
const oldIndex = event.oldIndex;

 const item = this.items.splice(oldIndex, 1)[0];
 this.items.splice(newIndex, 0, item);

},
```

至此，就已经完成了“vue2.0使用Sortable.js实现的拖拽功能示例”的实现。下面列举两个示例说明：

示例一

在上面的实现中，我们只添加了一个容器元素。如果需要多个容器元素之间实现拖拽，只需要将多个容器元素传递给Sortable.create方法即可。

mounted() {
  const container1 = this.$el.querySelector('.container1');
  const container2 = this.$el.querySelector('.container2');
  this.sortable1 = Sortable.create(container1, {
    animation: 150,
    onEnd: this.onSortEnd1,
  });
  this.sortable2 = Sortable.create(container2, {
    animation: 150,
    onEnd: this.onSortEnd2,
  });
},

示例二

如果需要对拖拽元素进行排序之前进行一些验证，例如判断拖拽元素的内容是否符合规则，可以使用Sortable.js提供的过滤器进行处理。将这些过滤器函数指定为options属性值即可。

mounted() {
  const container = this.$el.querySelector('.container');
  const options = {
    animation: 150,
    onEnd: this.onSortEnd,
    filter: (event) => {
      const itemEl = event.item;
      const content = itemEl.textContent.trim();
      return content.length === 0;
    },
  };
  this.sortable = Sortable.create(container, options);
},

在这个示例中，我们使用filter选项设置了一个过滤器，用于过滤空白的拖拽元素。如果需要过滤其他元素，可以根据需要编写适当的过滤器函数。