vuedraggable

vue-draggable 使用 Vue.js 的组件来实现拖放(拖动)效果。vue2和vue3在使用方面的区别不大，能区分的我都尽可能做了标注，所以就不分两篇文章了。

npm install vuedraggable --save # vue2

npm install vuedraggable@next --save # vue3

或者

yarn add vuedraggable # vue2

yarn add vuedraggable@next # vue3

注册

基本用法只需要在 Vue 项目中导入vuedraggable组件并注册即可:

javascript
复制代码
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  }
}

然后在模板中使用它:

html
复制代码
<draggable v-model="list">
  <div v-for="element in list" class="list-element">{{element}}</div>
</draggable>

css
复制代码
.list-element {
  padding: 10px;
  background: #eee;
}

javascript
复制代码
data: {
  list: ['Item 1', 'Item 2', 'Item 3']
}

转载自链接：juejin.cn/post/722638…
记录每天学习的点点滴滴