实现效果图：

一、安装。

cnpm i -S vuedraggable

二、引入和注册。

<script>
import vuedraggable from "vuedraggable";	//引入
export default {
  name: "",
  props: {},
  components: { vuedraggable },		//注册组件
};
</script>

三、实现。定义拖拽的数据（数组）。

<vuedraggable class="wrapper" v-model="list" @change="draggable">
      <transition-group>
        <div v-for="item in list" :key="item" class="item">{{item}}</div>
      </transition-group>
</vuedraggable>

data() {
    return {
      list: ["美食", "电影", "娱乐", "新闻", "游戏"]
    };
  },
 methods: {
    //拖拽
    draggable() {
      console.log("拖拽过程中");
    },
 }

<style scoped lang='scss'>
.wrapper {
  display: flex;
  width: 100%;
}
.item {
  width: 300px;
  height: 50px;
  background: burlywood;
  color: white;
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

如果需要横向排列，只要不添加transition-group就行了。

<vuedraggable class="wrapper" v-model="list" @change="draggable">
      <div v-for="item in list" :key="item" class="item">{{item}}</div>
</vuedraggable>

更多拖拽组件推荐：

Vue 拖拽组件 vuedraggable 和 vue-dragging
http://www.ptbird.cn/vue-draggable-dragging.html