描述:通过vue的插件 draggable完成列表拖拽排序功能
1、安装依赖
yarn add vuedraggable
或
npm i -S vuedraggable
2、vue2 页面中引入
<template>
<div>
<div @click="commitSort">确定排序</div>
<draggable v-model="dragList" chosen-class="chosen" force-fallback="true" group="people" animation="1000" @update="onUpdate" @end="onEnd">
<transition-group>
<div class="item" v-for="element in myArray" :key="element.id">{
{element.name}}</div>
</transition-group>
</draggable>
</div>
</template>
<script>
import vuedraggable from 'vuedraggable'
export default{
data(){
return {
dragList:[
{ people: 'cn', id: 1, sort:0, name: 'www.itxst.com' },
{ people: 'cn', id: 2, sort:1, name: 'www.baidu.com' },
{ people: 'cn', id: 3, sort:2,name: 'w