基于 vue.js 实现主页拖拽效果的教程

命中注定 • 2022-04-27 11:23:27 • 科技

今天给大家分享一个超不错的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实现一个禅道主页拖拽功能效果，希望对大家有所帮助！

基于 vue.js 实现主页拖拽效果的教程

快速体验

拖拽实现

相关推荐

1688一件代发的货源应该怎么发货呢（1688一件代发发货详细步骤）

魔兽世界9.0坐骑获得（魔兽世界9.0前夕必刷坐骑）

三星S21Ultra与iPhone12Pro拍照对比（S21Ultra和苹果12Pro夜拍谁好）

4k和超高清有什么区别（4k超清和4k高清的区别）

如何把移动硬盘加密码（移动优盘怎么加密码）

蜜雪冰城黑化了,具体怎么回事

发表评论