draggable 功能管理页面 - 可拖拽排序

页面效果：

不喜欢废话，上代码：
先 npm i -S vuedraggable
再在页面中引用

<template>
  <div class="fund1">
    <van-sticky>
      <ph-layout-header title="全部服务">
        <template #left>
          <img
            class="leftarrow"
            v-if="isShowIcon"
            :src="$staticPath.getImage('/AccountOpen/leftarrow.png')"
            @click="backHandle()"
          />
          <span class="clone_text" v-else @click="closeHandle()">{
   {
    '取消' }}</span>
        </template>
        <template #right @click="gotoPage('/enchashment/enchashment-index')">
          <span v-if="isShowIcon" @click="clickIconHandle()" class="manage">管理</span>
          <span v-else @click="preservationIconHandle()" class="manage">保存</span>
        </template>
      </ph-layout-header>
    </van-sticky>
    <div class="icon_index_box">
      <p>首页服务</p>
      <div class="col">
        <!-- 
          delay="100" 长按100之后才可以拖拽，因为会跟点击角标的 X号 事件有冲突
          filter=".img-hover" class名为.img-hover 不可以拖拽
          :disabled="disabled" 设置默认不可拖拽
           -->
        <draggable
          v-model="cfgIconInfoDoListIndex"
          delay="100"
          filter=".img-hover"
          animation="300"
          :disabled="disabled"
          :move="onMove"
        >
          <transition-group class="span_text">
            <div v-for="(item, index) in cfgIconInfoDoListIndex" :key="item.id" class="img_box">
              <div v-if="item.defaultFlag == '1'" class="img-hover">
                <p>
                  <img
                    :src="item.iconUrl"
                    @click="isClick && gotoIconUrl(item.urlType, item.url)"
                  />
                </p>
                <p>{
   {
    item.iconName }}</p>
              </div>
              <div v-else class="img-hover1">
                <p>
                  <img
                    :src="item.iconUrl"
                    @click="isClick && gotoIconUrl(item.urlType, item.url)"
                  />
                  <img
                    :src="$staticPath.getImage('/TabMainPage/delete_icon.png')"
                    class="delete_img"
                    v-if="item.defaultFlag == '0' && !isShowIcon"
                    @click="deleteIconHandle(index)"
                  />
                </p>
                <p>{
   {
    item.iconName }}</p>
              </div>
            </div>
          </transition-group>
        </draggable>
      </div>
      <div class="tips">以上工具已显示在首页</div>
    </div>
    <div
      class="icon_index_box"
      style="border-bottom: none"
      v-for="(value, key) in cfgIconInfoDoListAll"
      :key="key"
    >
      <p style="margin-top: 28px">{
   {
    key }}</p>
      <div class="col">
        <div class="span_text">
          <div v-for="(item, i) in value" :key="item.id" class="img_box">
            <div class="img-hover" @click="isClick && gotoIconUrl(item.urlType, item.url)">
              <p>
                <img :src="item.iconUrl" />
                <img
                  :src="$staticPath.getImage('/TabMainPage/add_icon3.png')"
                  class="add_img"
                  v-if="!isShowIcon && hasCurrentIcon(item)"
                  @click="addIconHandle(key, i)"
                />
              </p>
              <p>{
   {
    item.iconName }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
export default {
   
  components: {
   
    draggable
  },
  data() {
   
    return {
   
      cfgIconInfoDoListIndex: [], // 首页显示图标
      cfgIconInfoDoListNoFix: [],
      cfgIconInfoDoListAll: {
   },
      isShowIcon: true, //是否展示角标,
      disabled: true,
      isClick: true,
      obj: {
   }
    };
  },
  beforeCreate() {
   
    document.querySelector('body').style.background = '#fdfbfb';
  },
  created() {
   
    this.queryIconList();
  },
  mounted() {
   },
  methods: {
   
    /** 因为有默认icon不可拖拽，所以每行展示四个，如果只有三个默认icon的话，把可拖拽的托上面去就可以移动了，所以要给他不可移动 */
    onMove(e) {
   
      if (e.relatedContext.element.commonUseFlag == 1 && e.relatedContext.element.defaultFlag == 1)
        return false;
      return true;
    },
    /** 查询所有的数据 */
    queryIconList() {
   
      // var key = 'cfgIconInfoDoListAll';
      // // 还是需要