vue使用vue-slicksort实现拖动排序

1，安装vue-slicksort

vue-slicksort官网地址

npm install vue-slicksort

2，在需要的页面引入

import {SlickItem, SlickList} from "vue-slicksort";

3，使用

<SlickList
          :lockToContainerEdges="true"
          axis="x"
          lockAxis="x"
          v-model="tableData"
          class="SortableList"
          @input="getChangeLists"
      >
        <SlickItem
            v-for="(item, index) in tableData"
            class="SortableItem"
            :index="index"
            :key="index"
        >
          <div class="item-name">{{ item.name }}</div>
          <div class="root2">
            <SlickList
                :lockToContainerEdges="true"
                class="list"
                lockAxis="y"
                v-model="item.mainList"
                @input="getChange"
            >
              <SlickItem
                  class="list-item"
                  v-for="(item, index) in item.mainList"
                  :index="index"
                  :key="index"
              >
                {{ item }}
              </SlickItem>
            </SlickList>
          </div>
        </SlickItem>
      </SlickList>

components: {
    SlickItem,
    SlickList
  },
   data() {
    return {
      tableData: [
        {
          name: 'XXX',
          mainList: ['XXX', 'XXX', 'XXX']
        },
        {
          name: 'XXX',
          mainList: ['XXX', 'XXX', 'XXX']
        },
        {
          name: 'XXX',
          mainList: ['XXX', 'XXX', 'XXX']
        },
        {
          name: 'XXX',
          mainList: ['XXX', 'XXX', 'XXX']
        },
        {
           name: 'XXX',
          mainList: ['XXX', 'XXX', 'XXX']
        }
      ],
    }
  },

css：

<style lang="less">
//rem是移动端适配，使用时将根字体设为16px
.root1 {
  width: 87.4rem;
  height: 38rem;
  box-shadow: 0 4px 11px 0 rgba(23, 67, 91, 0.1);
  border-radius: .8rem;
  background: white;
  margin-top: 2rem;
  position: relative;
  padding: 6rem 3.5rem 3rem;
  overflow-y: hidden;
  overflow-x: scroll;
}

.root2 {
  display: flex;
}

.list {
  margin: 0 auto;
  padding: 0;
  overflow: auto;
  border-radius: 3px;
}

.list-item {
  width: 10.8rem;
  height: 3rem;
  border-radius: .4rem;
  border: 1px solid #1885F2;
  font-size: 1.6rem;
  font-family: SourceHanSansCN-Regular, serif;
  font-weight: 400;
  color: #1885F2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: justify;
  padding: .5rem;
  margin-top: 1.2rem;
}

.SortableList {
  display: flex;
  white-space: nowrap;
  z-index: 99;
}

.SortableItem {
  display: flex;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  user-select: none;
  color: #333;
  font-weight: 400;
  margin-left: 3rem;
  z-index: 1;

  &:first-child {
    margin-left: 0;
  }
}

.item-name {
  width: 11rem;
  height: 3.2rem;
  background: #1885F2;
  border-radius: .4rem;
  font-size: 1.6rem;
  font-family: SourceHanSansCN-Bold, serif;
  font-weight: bold;
  color: #FFFFFF;
  padding: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashed {
  width: 82.8rem;
  border: 1px dashed #1885F2;
  position: absolute;
  top: 8rem;
}
</style>

4，效果

5，移动端使用会有报错

就在全局添加

* {
  padding: 0;
  margin: 0;
  /*解决移动端报错*/
  touch-action: none;
}