uni-app引入sortable列表拖拽，兼容App和H5

​​sortable文档​​ 项目结构

​​sortable​​下载到本地

​​renderjs​​只支持H5和App-vue，不支持小程序和App-nvue开发

<template>
  <view class="sort" id="sort">
    <view class="sort-item" :data-id="item" v-for="item in types" :key="item">{{item}}</view>
  </view>
</template>

<script>export default {
    data() {
      return {
        types: ["语文", "数学", "英语", "历史", "政治"]
      }
    },
    methods: {
      changeSort(e) {
        console.log(e)
      }
    }
  }</script>

<script module='sortable' lang="renderjs">export default {
    mounted() {
      this.initSortable()
    },
    methods: {
      initSortable() {
        if (typeof window.Sortable === 'function') {
          this.setSortable()
        } else {
          const script = document.createElement('script')
          script.src = 'static/js/sortable.min.js'
          script.onload = this.setSortable.bind(this)
          document.head.appendChild(script)
        }
      },
      setSortable() {
        let option = {
          animation: 150,
          onEnd: (e) => {
            // 拖拽完成后回调
            this.$ownerInstance.callMethod('changeSort', sortable.toArray());
          }
        }
        let sortable = Sortable.create(document.getElementById('sort'), option);
      },
    }
  }</script>

<style lang="scss">.sort {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    &-item {
      width: 200rpx;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 15rpx;
      background: #f5f5f5;
      margin: 5rpx;
    }
  }</style>