vue网格拖拽排序

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;
                }
              }
            }
          }

参数说明

要想得到你想要的样式，要注意在SlickList和SlickItem上添加你定义的class，可以直接将二者当成两个div。

参数说明
关于拖拽组件的其他参数和方法说明，大家可参考 vue-slicksort

有问题，大家可留言一起交流。