今天给大家分享一个超不错的Vue仿禅道首页拖拽布局VueDndKon。

vue-dnd-kon 基于vuedraggable实现的仿禅道首页拖拽项目。支持模块上下及左右自由拖动布局。

主页分为左右两栏流式布局，每个模块可以进行上下和左右拖动排列。

拖动功能是基于 Vue.Draggable 插件开发。

https://github.com/SortableJS/Vue.Draggable

快速体验

# 克隆项目
git clone https://github.com/hecun0000/vue-dnd-kon.git

# 进入项目目录
cd vue-dnd-kon

# 安装依赖
npm install

# 开发环境
npm run serve

# 打包
npm run build

拖拽实现

分别在 .left .right 中添加两个拖拽容器。

<div class="layout-container">
  <!--左栏-->
  <div class="left">
    <draggable
      v-bind="dragOptions"
      class="list-group"
      :list="item"
    >
    // ... 拖拽元素或组件
    </draggable>
  </div>
  
  <!--右栏-->
  <div class="right">
    <draggable
      v-bind="dragOptions"
      class="list-group"
      :list="item"
    >
    // ... 拖拽元素或组件
    </draggable>
  </div>
</div>
<script>
  import draggable from "vuedraggable";
  export default {
    components: {draggable},
    computed: {
      dragOptions() {
        return {
          animation: 30,
          handle: ".drag-handle",
          group: "description",
          ghostClass: "ghost",
          chosenClass: "sortable",
          forceFallback: true
        };
      }
    }
  };
</script>

# 仓库地址
https://github.com/hecun0000/vue-dnd-kon

ok，以上就是基于vue实现一个禅道主页拖拽功能效果，希望对大家有所帮助！