vue 拖拽排序

1.vuedraggable

中文文档vuedraggablehttps://www.itxst.com/vue-draggable/tutorial.htmlhttps://www.itxst.com/vue-draggable/tutorial.html

vuedraggable 组件式封装，并且将可拖动元素放进了 transition-group 上面，过渡动画都比较好。

//下载
npm i -S vuedraggable
//引入
import draggable from 'vuedraggable'
//注册
components: { draggable },

//使用
 //html
<vuedraggable class="wrapper" v-model="list">
    <transition-group>
      <div v-for="item in list" :key="item" class="item">
        <p>{{item}}</p>
      </div>
    </transition-group>
  </vuedraggable>
//js
data() {
    return {
      list: [1,2,34,4,54,5]
    }
  },

2.vue-dragging

封装了 v-dragging 全局指令，然后通过全局指令去数据绑定等。

awe-dnd 是没有双向绑定, 因此提供了事件，在拖拽结束的时候用来更新列表或者是去触发父组件监听的事件

//下载
npm install awe-dnd --save
//引入
import VueDND from 'awe-dnd'
//注册
Vue.use(VueDND)
//使用
//html
// item 就是单个对象，而 list 则是数据列表，group 则是用来声明一个组，来保证可以在一个页面中进行多个数据源的操作。
<div class="color-list">
      <div
          class="color-item"
          v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
          :key="color.text"
      >{{color.text}}</div>
  </div>


//js
 data () {
    return {
        colors: [{
            text: "Aquamarine"
        }, {
            text: "Hotpink"
        }, {
            text: "Gold"
        }, {
            text: "Crimson"
        }, {
            text: "Blueviolet"
        }, {
            text: "Lightblue"
        }, {
            text: "Cornflowerblue"
        }, {
            text: "Skyblue"
        }, {
            text: "Burlywood"
        }]
    }
  },


mounted () {//两个事件方法如下
    this.$dragging.$on('dragged', ({ value }) => {
      console.log(value.item)
      console.log(value.list)
      console.log(value.otherData)
    })
    this.$dragging.$on('dragend', (res) => {
        console.error(res);
    })
  }

3.vue-drag-drop

//下载
npm install --save vue-drag-drop
//引入
import VueDragDrop from 'vue-drag-drop'
//注册
Vue.use(VueDragDrop)
//使用
//html
//drag 可拖动元素
<drag
  v-show="whereUtil === false"
  :transfer-data="{ whereDrag }"
  style="display:inline;margin-right:15px"
>
  <el-button id="where" type="primary" plain>WHERE</el-button>
</drag>
// drop可拖动的元素允许被拖到这个位置
<drop @drop="handleDrop">
  <div
    id="queryArea"
    class="input"
    draggable
    style="width: 90%;"
  >
  	<el-col v-show="whereUtil === true">
	  	<span>WHERE </span>
	    <el-input
	      v-model="whereValue"
	      style="width:70%"
	      clearable
	    />
	</el-col>
  </div>
</drop>


//js
data(){
return{
    // 数据
whereValue: '',
whereDrag: '', // where拖動
whereUtil: false
}
},
methods:{
    handleDrop(data, event) {
// data获取到拖动元素的数据，key为:transfer-data中的值
  const value = Object.keys(data).join()
  if (value === 'whereDrag') {
  	this.whereUtil = true
  }
}
}

4.vue-slicksort

中文文档 vue-slicksort/zh.md at 4c7d832e1d87c3681a8aa52d4566271f774feb26 · Jexordexan/vue-slicksort · GitHubA set of vue mixins to turn any list into an animated, touch-friendly, sortable list ✌️ - vue-slicksort/zh.md at 4c7d832e1d87c3681a8aa52d4566271f774feb26 · Jexordexan/vue-slicksorthttps://github.com/Jexordexan/vue-slicksort/blob/HEAD/doc/zh.md

//下载
npm install vue-slicksort --save
//引入
import { SlickList, SlickItem } from 'vue-slicksort'
//注册
 components: {
    SlickItem,
    SlickList
  },
//使用
//html
<div class="root1">
    <SlickList
      :lockToContainerEdges="true"
      axis="x"
      lockAxis="x"
      v-model="items"
      class="SortableList"
      @input="getChangeLists"
    >
      <SlickItem
        v-for="(item, index) in items"
        class="SortableItem"
        :index="index"
        :key="index"
      >
        <div class="item-name">{{ item.name }}</div>
        <div class="root2">
          <SlickList
            :lockToContainerEdges="true"
            class="list"
            lockAxis="y"
            v-model="item.itemArr"
          >
            <SlickItem
              class="list-item"
              v-for="(item, index) in item.itemArr"
              :index="index"
              :key="index"
            >
              {{ item }}
            </SlickItem>
          </SlickList>
        </div>
      </SlickItem>
    </SlickList>
  </div>


//js
 data() {
    return {
      flag: true,
      items: [
        {
          name: 'Tab-1',
          itemArr: ['1-1', '1-2', '1-3']
        },
        {
          name: 'Tab-2',
          itemArr: ['2-1', '2-2', '2-3']
        },
        {
          name: 'Tab-3',
          itemArr: ['3-1', '3-2', '3-3']
        }
      ]
    }
  },
  methods: {
    getChangeLists(vals) {
      console.log(vals, 'vals')
    }
  }