vue项目中引入拖拽事件

今天做了一个在vue项目里面安装拖拽插件 下面仔细讲解是如何安装的

首先npm指令安装vuedraggable插件

npm install vuedraggable

然后在页面引入vuedraggable组件并使用

import draggable from 'vuedraggable'
export default {
  components: { draggable },

接着在组件中的内容是这样的

<draggable v-model="tableData" chosen-class="chosen" force-fallback="true" group="people" animation="1000" @start="onStart" @end="onEnd">
    <!-- @start为拖拽开始触发  @end为拖拽结束触发  v-model绑定的与你需要拖拽的数据为同一个数组    animation拖动时的动画效果，数字类型。如设置animation=1000表示1秒过渡动画效果-->
    <transition-group>
        <!-- 拖拽的div需要放在这个组件里面 -->
        <div v-for="(item, index) in tableData" :key="index" class="sort">

        </div>
    </transition-group>
</draggable>

到这里拖拽事件就完成了 接下来附上官方文档地址 可以去看一下

https://www.itxst.com/vue-draggable/tutorial.html