vue网格拖拽排序

最新推荐文章于 2024-08-29 15:10:00 发布

长剑浣花咻咻咻

最新推荐文章于 2024-08-29 15:10:00 发布

阅读量1.7k

点赞数 1

分类专栏：前端文章标签： vue 网格拖拽排序九宫格拖拽排序 vue-slicksort

本文链接：https://blog.csdn.net/sinat_28071063/article/details/102372442

版权

前端专栏收录该内容

45 篇文章 1 订阅

订阅专栏

demo
上图是网格拖拽排序的效果图，如果在你的项目中也有这样的需求，那么不妨来看看如何实现。

技术框架：vue.js
拖拽组件： vue-slicksort

vue-slicksort：是一个功能强大的可拖拽的vue.js组件。它可以自动滚动，锁定坐标系。支持拖拽时，流畅的动画效果。可以支持水平，垂直或者网格的拖拽。支持触摸。

安装

npm或yarn安装都可

$ npm install vue-slicksort --save
或
$ yarn add vue-slicksort

使用

引入

import { SlickList, SlickItem } from 'vue-slicksort'
export default {
  components: {
    SlickList,
    SlickItem,
  },
  data () {
    return {
      commonsApplication: []
    }
  }
}

使用（部分代码片段）

  <SlickList :lockToContainerEdges="true"
                    :pressDelay="300"
                    v-model="commonsApplication"
                    helperClass="helperClass"
                    class="ul"
                    axis="xy">
                    <SlickItem
                      v-for="(item,index) in commonsApplication"
                      :index="index"
                      :key="index+'key'"
                      class="li">
                      <div :class="{'add-border':isEditMenus}" class="app-border" @click="toApp(item)">
                        <img :src="item.menuIcon" class="app-icon">
                        <p>{{ item.menuName }}</p>
                        <img
                          v-if="isEditMenus"
                          src="@/assets/newIcon/deleteMenus.svg"
                          alt="删除应用"
                          class="delete-app"
                          @click.stop="deleteApp(item,index)">
                      </div>
                    </SlickItem>
                  </SlickList>
                  <div class="notice">以上应用展示在首页</div>

自定义样式（部分代码片段）

 .ul{
            display: flex;
            flex-wrap: wrap;
            text-align: center;
            padding-bottom:18px;
            .li{
              width: 25%;
              margin: 5px 0px;
              padding:0 4px;
              .add-border{
                border: 1px solid #E2E3E7 !important;
              }
              .app-border{
                z-index:99999!important;
                box-sizing: border-box;
                border-radius: 8px;
                position:relative;
                padding:5px;
                .app-icon{
                  width: 48px;
                  height: 48px;
                }
              }
            }
          }