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

最新推荐文章于 2023-09-14 19:11:40 发布
最新推荐文章于 2023-09-14 19:11:40 发布
阅读量278 收藏 1
点赞数
分类专栏： vue 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/p_pppxxxxmmm/article/details/121518426
版权

页面效果：
在这里插入图片描述
不喜欢废话，上代码：
先 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';
      // // 还是需要调用接口获取数据的 由于中台可配置的 登录后不一定就跟缓存的图标列表一致
      // this.$mc
      //   .postForm('S15Q407', {}, { headers: { isStateError: false } })
      //   .then((res) => {
      var obj = {
        所有服务: [
          {
            updateDate: 1637078400000,
            whiteType: null,
            defaultFlag: '1',
            funcUrlType: null,
            iconName: '测试固定',
            dataState: '1',
            commonUseFlag: '1',
            shelfBranch: '1',
            url: 'https://www.baidu.com',
            sortNo: 8,
            createBy: 'admin',
            urlType: '1',
            updateBy: 'admin',
            busiType: '所有服务',
            iconCode: '009',
            startTime: 'Tue Nov 16 00:00:00 CST 2021',
            endTime: 'Tue Nov 30 00:00:00 CST 2021',
            iconUrl:
              'https://ajstg1.phfund.com.cn/apluswebcg/picture?path=L2FwbHVzL2ZpbGUvMjAyMTExMTcvOTEwNTQ2MjEyOTI1NzM5MDA5LnBuZw==',
            id: '50facd29e2aa472c81ca6a1367a56f6f',
            createDate: 1637078400000
          },
          {
            updateDate: 1637078400000,
            whiteType: null,
            defaultFlag: '1',
            funcUrlType: null,
            iconName: '现金支付',
            dataState: '1',
            commonUseFlag: '1',
            shelfBranch: '1',
            url: null,
            sortNo: 1,
            createBy: 'admin',
            urlType: '1',
            updateBy: 'admin',
            busiType: '所有服务',
            iconCode: 'XJZF',
            startTime: 'Mon Nov 01 00:00:00 CST 2021',
            endTime: 'Sat Nov 12 00:00:00 CST 2022',
            iconUrl:
              'https://ajstg1.phfund.com.cn/apluswebcg/picture?path=L2FwbHVzL2ZpbGUvMjAyMTExMTcvOTEwNDc0NTM2NjI4MjYwODY0LnBuZw==',
            id: '0909b09fcd514768b36b84bc0b7c07b4',
            createDate: 1636646400000
          },
          {
            updateDate: 1637078400000,
            whiteType: null,
            defaultFlag: '1',
            funcUrlType: null,
            iconName: '新手选基',
            dataState: '1',
            commonUseFlag: '1',
            shelfBranch: '1',
            url: null,
            sortNo: 2,
            createBy: 'admin',
            urlType: '1',
            updateBy: 'admin',
            busiType: '所有服务',
            iconCode: 'XSXJ',
            startTime: 'Mon Nov 01 00:00:00 CST 2021',
            endTime: 'Sun Nov 13 00:00:00 CST 2022',
            iconUrl:
              'https://ajstg1.phfund.com.cn/apluswebcg/picture?path=L2FwbHVzL2ZpbGUvMjAyMTExMTcvOTEwNDczNjI0ODE1OTMxMzkyLnBuZw==',
            id: '79c5d2dd47e64e6c9ff27e6a7f244d36',
            createDate: 1636732800000
          },
          {
            updateDate: 1637078400000,
            whiteType: null,
            defaultFlag: '1',
            funcUrlType: null,
            iconName: '定投大会',
            dataState: '1',
            commonUseFlag: '1',
            shelfBranch: '1',
            url: null,
            sortNo: 3,
            createBy: 'admin',
            urlType: '1',
            updateBy: 'admin',
            busiType: '所有服务',
            iconCode: 'DTDH',
            startTime: 'Mon Nov 01 00:00:00 CST 2021',
            endTime: 'Sun Nov 13 00:00:00 CST 2022',
            iconUrl:
              'https://ajstg1.phfund.com.cn/apluswebcg/picture?path=L2FwbHVzL2ZpbGUvMjAyMTExMTcvOTEwNDczNTQ3OTU1MzEwNTk0LnBuZw==',
            id: 'ab4e69af9aae4fe28ba7108b4c419d3d',
            createDate: 1636732800000
          },
          {
            updateDate: 1637078400000,
            whiteType: null,
            defaultFlag: '1',
            funcUrlType: null,
            iconName: '鹏华投顾',
            dataState: '1',
            commonUseFlag: '1',
            shelfBranch: '1',
            url: null,
            sortNo: 4,
            createBy: 'admin',
            urlType: '1',
            updateBy: 'admin',
            busiType: '所有服务',
            iconCode: 'PHTG',
            startTime: 'Mon Nov 01 00:00:00 CST 2021',
            endTime: 'Sun Nov 13 00:00:00 CST 2022',
            iconUrl:
              'https://ajstg1.phfund.com.cn/apluswebcg/picture?path=L2FwbHVzL2ZpbGUvMjAyMTExMTcvOTEwNDczNzA2Nzg5NDA4NzcwLnBuZw==',
            id: '8a3fc07694324419b6c368885fa9bbb0',
            createDate: 1636732800000
          },
          {
            updateDate: 1637078400000,
            whiteType: null,
            defaultFlag: '0',
            funcUrlType: null,
            iconName: '群星闪耀',
            dataState: '1',
            commonUseFlag: '1',
            shelfBranch: '1',
            url: null,
            sortNo: 12,
            createBy: 'init',
            urlType: '1',
            updateBy: 'admin',
            busiType: '所有服务',
            iconCode: 'QXSY',
            startTime: 'Mon Nov 01 00:00:00 CST 2021',
            endTime: 'Sat Nov 12 00:00:00 CST 2022',
            iconUrl:
              'https://ajstg1.phfund.com.cn/apluswebcg/picture?path=L2FwbHVzL2ZpbGUvMjAyMTExMTcvOTEwNDczMzc4NDQ2NzA4NzM3LnBuZw==',
            id: '001',
            createDate: 1636646400000
          },
          {
            updateDate: 1637078400000,
            whiteType: null,
            defaultFlag: '0',
            funcUrlType: null,
            iconName: '固收王牌',
            dataState: '1',
            commonUseFlag: '1',
            shelfBranch: '1',
            url: null,
            sortNo: 10,
            createBy: 'admin',
            urlType: '1',
            updateBy: 'admin',
            busiType: '所有服务',
            iconCode: 'GSWP',
            startTime: 'Mon Nov 01 00:00:00 CST 2021',
            endTime: 'Sun Nov 13 00:00:00 CST 2022',
            iconUrl:
              'https://ajstg1.phfund.com.cn/apluswebcg/picture?path=L2FwbHVzL2ZpbGUvMjAyMTExMTcvOTEwNDc0MTYyNTM0MDkyODAxLnBuZw==',
            id: '99b1f933917941dbb09198ef5806cfeb',
            createDate: 1636732800000
          },
          {
            updateDate: 1637078400000,
            whiteType: null,
            defaultFlag: '1',
            funcUrlType: null,
            iconName: '优选指数',
            dataState: '1',
            commonUseFlag: '1',
            shelfBranch: '1',
            url: null,
            sortNo: 7,
            createBy: 'admin',
            urlType: '1',
            updateBy: 'admin',
            busiType: '所有服务',
            iconCode: 'YXZS',
            startTime: 'Mon Nov 01 00:00:00 CST 2021',
            endTime: 'Sun Nov 13 00:00:00 CST 2022',
            iconUrl:
              'https://ajstg1.phfund.com.cn/apluswebcg/picture?path=L2FwbHVzL2ZpbGUvMjAyMTExMTcvOTEwNDczODczMTk0MjI1NjY0LnBuZw==',
            id: '3615f672c9c345ca81158c7e5125ec3e',
            createDate: 1636732800000
          },
          {
            updateDate: 1637078400000,
            whiteType: null,
            defaultFlag: '1',
            funcUrlType: null,
            iconName: '高端理财',
            dataState: '1',
            commonUseFlag: '1',
            shelfBranch: '1',
            url: null,
            sortNo: 6,
            createBy: 'admin',
            urlType: '1',
            updateBy: 'init',
            busiType: '所有服务',
            iconCode: 'GDLC',
            startTime: 'Mon Nov 01 00:00:00 CST 2021',
            endTime: 'Sun Nov 13 00:00:00 CST 2022',
            iconUrl:
              'https://ajstg1.phfund.com.cn/apluswebcg/picture?path=L2FwbHVzL2ZpbGUvMjAyMTExMTcvOTEwNDc0MDc0MzQ0NjU2ODk3LnBuZw==',
            id: '6027e664f1d440e4931e45016088dbbc',
            createDate: 1636732800000
          },
          {
            updateDate: 1636992000000,
            whiteType: null,
            defaultFlag: '0',
            funcUrlType: null,
            iconName: 'sss',
            dataState: '1',
            commonUseFlag: '1',
            shelfBranch: '1',
            url: null,
            sortNo: 9,
            createBy: 'admin',
            urlType: '2',
            updateBy: 'admin',
            busiType: '所有服务',
            iconCode: '001',
            startTime: 'Mon Nov 01 00:00:00 CST 2021',
            endTime: 'Wed Nov 16 00:00:00 CST 2022',
            iconUrl:
              'https://ajstg1.phfund.com.cn/apluswebcg/picture?path=L2FwbHVzL2ZpbGUvMjAyMTExMTYvOTEwMjU1MTk1OTcwMzQyOTEyLnBuZw==',
            id: '0e8ea5c47a0e4f49b2779ac3141ca558',
            createDate: 1636992000000
          },
          {
            updateDate: 1637078400000,
            whiteType: null,
            defaultFlag: '1',
            funcUrlType: null,
            iconName: 'ffff',
            dataState: '1',
            commonUseFlag: '1',
            shelfBranch: '1',
            url: null,
            sortNo: 5,
            createBy: 'admin',
            urlType: '1',
            updateBy: 'init',
            busiType: '所有服务',
            iconCode: '002',
            startTime: 'Mon Nov 01 00:00:00 CST 2021',
            endTime: 'Wed Nov 16 00:00:00 CST 2022',
            iconUrl:
              'https://ajstg1.phfund.com.cn/apluswebcg/picture?path=L2FwbHVzL2ZpbGUvMjAyMTExMTYvOTEwMjU1MzQ1OTUwMjY1MzQ0LnBuZw==',
            id: '09ff99e9942b498798c96f6232cffc38',
            createDate: 1636992000000
          },
          {
            updateDate: 1636992000000,
            whiteType: null,
            defaultFlag: '0',
            funcUrlType: null,
            iconName: 'ggg',
            dataState: '1',
            commonUseFlag: '1',
            shelfBranch: '1',
            url: null,
            sortNo: 11,
            createBy: 'admin',
            urlType: '1',
            updateBy: 'admin',
            busiType: '所有服务',
            iconCode: '003',
            startTime: 'Mon Nov 01 00:00:00 CST 2021',
            endTime: 'Wed Nov 16 00:00:00 CST 2022',
            iconUrl:
              'https://ajstg1.phfund.com.cn/apluswebcg/picture?path=L2FwbHVzL2ZpbGUvMjAyMTExMTYvOTEwMjU1NDc3NjQzMDIyMzM2LnBuZw==',
            id: '7d25c14b8c084ca1a39ca5585edd5077',
            createDate: 1636992000000
          },
          {
            updateDate: 1636992000000,
            whiteType: null,
            defaultFlag: '0',
            funcUrlType: null,
            iconName: '预约用钱',
            dataState: '1',
            commonUseFlag: '0',
            shelfBranch: '1',
            url: null,
            sortNo: 12,
            createBy: 'admin',
            urlType: '1',
            updateBy: 'admin',
            busiType: '所有服务',
            iconCode: '004',
            startTime: 'Mon Nov 01 00:00:00 CST 2021',
            endTime: 'Wed Nov 16 00:00:00 CST 2022',
            iconUrl:
              'https://ajstg1.phfund.com.cn/apluswebcg/picture?path=L2FwbHVzL2ZpbGUvMjAyMTExMTYvOTEwMjU1Njk2NzI0MTAzMTY5LnBuZw==',
            id: '692417fbc1234274b0ab0ace7896a7eb',
            createDate: 1636992000000
          },
          {
            updateDate: 1636992000000,
            whiteType: null,
            defaultFlag: '0',
            funcUrlType: null,
            iconName: '定存工资',
            dataState: '1',
            commonUseFlag: '0',
            shelfBranch: '1',
            url: null,
            sortNo: 13,
            createBy: 'admin',
            urlType: '1',
            updateBy: 'admin',
            busiType: '所有服务',
            iconCode: '005',
            startTime: 'Mon Nov 01 00:00:00 CST 2021',
            endTime: 'Wed Nov 16 00:00:00 CST 2022',
            iconUrl:
              'https://ajstg1.phfund.com.cn/apluswebcg/picture?path=L2FwbHVzL2ZpbGUvMjAyMTExMTYvOTEwMjU1ODk1MTA2MjkzNzYyLnBuZw==',
            id: '955ea1b343874af8b982a75b63e812d3',
            createDate: 1636992000000
          },
          {
            updateDate: 1636992000000,
            whiteType: null,
            defaultFlag: '0',
            funcUrlType: null,
            iconName: '优债宝',
            dataState: '1',
            commonUseFlag: '0',
            shelfBranch: '1',
            url: null,
            sortNo: 14,
            createBy: 'admin',
            urlType: '1',
            updateBy: 'admin',
            busiType: '所有服务',
            iconCode: '006',
            startTime: 'Mon Nov 01 00:00:00 CST 2021',
            endTime: 'Wed Nov 16 00:00:00 CST 2022',
            iconUrl:
              'https://ajstg1.phfund.com.cn/apluswebcg/picture?path=L2FwbHVzL2ZpbGUvMjAyMTExMTYvOTEwMjU2MTgxNDM0NjUwNjI1LnBuZw==',
            id: 'edf251c63c874ea4a147b9e4568df60b',
            createDate: 1636992000000
          },
          {
            updateDate: 1636992000000,
            whiteType: null,
            defaultFlag: '0',
            funcUrlType: null,
            iconName: '公告公告',
            dataState: '1',
            commonUseFlag: '0',
            shelfBranch: '1',
            url: null,
            sortNo: 15,
            createBy: 'admin',
            urlType: '1',
            updateBy: 'admin',
            busiType: '所有服务',
            iconCode: '007',
            startTime: 'Mon Nov 01 00:00:00 CST 2021',
            endTime: 'Wed Nov 16 00:00:00 CST 2022',
            iconUrl:
              'https://ajstg1.phfund.com.cn/apluswebcg/picture?path=L2FwbHVzL2ZpbGUvMjAyMTExMTYvOTEwMjU2MzMzODU1NjU3OTg2LnBuZw==',
            id: '62ef5e74ded14f00b79d3b44943fe0c1',
            createDate: 1636992000000
          },
          {
            updateDate: 1636992000000,
            whiteType: null,
            defaultFlag: '0',
            funcUrlType: null,
            iconName: '持仓秀',
            dataState: '1',
            commonUseFlag: '0',
            shelfBranch: '1',
            url: null,
            sortNo: 16,
            createBy: 'admin',
            urlType: '1',
            updateBy: 'admin',
            busiType: '所有服务',
            iconCode: '008',
            startTime: 'Mon Nov 01 00:00:00 CST 2021',
            endTime: 'Wed Nov 16 00:00:00 CST 2022',
            iconUrl:
              'https://ajstg1.phfund.com.cn/apluswebcg/picture?path=L2FwbHVzL2ZpbGUvMjAyMTExMTYvOTEwMjU2NjYyMTAxODg5MDI2LnBuZw==',
            id: '3593dc4b51ad45a4985d5d73c46a98ec',
            createDate: 1636992000000
          }
        ]
      };
      this.cfgIconInfoDoListAll = obj;
      Object.keys(this.cfgIconInfoDoListAll).forEach((item) => {
        this.cfgIconInfoDoListAll[item].forEach((cfgitem) => {
          if (cfgitem.commonUseFlag == '1') {
            this.cfgIconInfoDoListIndex.push(cfgitem);
          }
        });
      });
      this.cfgIconInfoDoListIndex.sort((a, b) => {
        return a.sortNo - b.sortNo;
      });
      // })
      // .catch((error) => {});
    },
    hasCurrentIcon(item) {
      /** 在首页数组里面查找传过来的iconCode,~ 波浪线是找到了，！ 是取反，没找到的意思，没找到就不展示+号的角标 */
      return !~this.cfgIconInfoDoListIndex.findIndex((f) => f.iconCode === item.iconCode);
    },
    clickIconHandle() {
      if (this.$limit('clickIconHandle', 1)) return;
      this.isShowIcon = false;
      this.disabled = false;
      this.isClick = false;
    },
    deleteIconHandle(index) {
      if (this.$limit('deleteIconHandle', 1)) return;
      var list = this.cfgIconInfoDoListIndex.splice(index, 1);
      for (var k in this.cfgIconInfoDoListAll) {
        for (var i = 0; i < this.cfgIconInfoDoListAll[k].length; i++) {
          if (list[0].iconCode == this.cfgIconInfoDoListAll[k][i].iconCode) {
            this.cfgIconInfoDoListAll[k][i].commonUseFlag = '0';
          }
        }
      }
    },
    addIconHandle(key, index) {
      if (this.$limit('addIconHandle', 1)) return;
      this.cfgIconInfoDoListAll[key][index].commonUseFlag = '1';
      if (this.cfgIconInfoDoListIndex.length < 12) {
        for (var k in this.cfgIconInfoDoListAll) {
          if (k == key) {
            this.cfgIconInfoDoListIndex.push(this.cfgIconInfoDoListAll[k][index]);
          }
        }
      } else {
        this.$toast('首页功能最多不可以多于12个');
      }
    },
    closeHandle() {
      if (this.$limit('closeHandle', 1)) return;
      this.isShowIcon = true;
      this.disabled = true;
      this.isClick = true;
      var indexList = this.$storage.getItem('lastUserFuc');
      var allList = this.$storage.getItem('cfgIconInfoDoListAll', true);
      this.cfgIconInfoDoListIndex = indexList;
      this.cfgIconInfoDoListAll = allList;
    },
    preservationIconHandle() {
      if (this.cfgIconInfoDoListIndex.length < 0) {
        this.$toast('请至少保存1个首页功能');
        return;
      }
      for (var i = 0; i < this.cfgIconInfoDoListIndex.length; i++) {
        this.cfgIconInfoDoListIndex[i].sortNo = i + 1;
      }
      var cfgIconInfoDoListNoFix = [];
      this.cfgIconInfoDoListIndex.forEach((item) => {
        if (item.defaultFlag == '0') {
          cfgIconInfoDoListNoFix.push(item);
        }
      });
      this.$storage.removeItem('cfgIconInfoDoListNoFix');
      this.$storage.removeItem('cfgIconInfoDoListNoFix', true);
      this.$storage.setItem('cfgIconInfoDoListNoFix.local', cfgIconInfoDoListNoFix);
      this.$storage.setItem('cfgIconInfoDoListNoFix', cfgIconInfoDoListNoFix, true);
      var data = {
        cfgIconInfoReqList: this.cfgIconInfoDoListIndex
      };
      this.$mc
        .postForm('S111158', data)
        .then(() => {
          this.isShowIcon = true;
          this.disabled = true;
          this.isClick = true;
          this.$toast('保存成功');
        })
        .catch(() => {});
    },
    // icon栏目的跳转路径
    gotoIconUrl() {
      alert('跳转了');
    },
    backHandle() {
      if (this.$limit('backHandle', 1)) return;
      this.$pageBack();
    }
  },
  watch: {
    /** 监听拖拽后的数据变化 */
    cfgIconInfoDoListIndex(indexValue) {
      this.cfgIconInfoDoListIndex = indexValue;
    }
  },
  filters: {}
};
</script>

<style lang="less" scoped>
.fund1 {
  background: #fdfbfb;
}
.ph-layout-header {
  background-color: #fdfbfb;
}
.manage {
  font-family: PingFangSC-Medium;
  font-size: 15px;
}
.leftarrow {
  width: 11px;
}
.icon_index_box {
  margin: 14px;
  border-bottom: 1px solid #e7ebf0;
  p:nth-child(1) {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    font-family: PingFangSC-Medium;
  }
  .col {
    flex: 0.25;
    // width: 320px;
    margin: 23px auto 0;
    .span_text {
      display: flex;
      flex-wrap: wrap;
    }
    .img_box {
      width: 25%;
      text-align: center;
      div {
        flex: 1;
        p:nth-child(1) {
          margin: 0 auto;
          position: relative;
          .delete_img {
            width: 21px;
            height: 21px;
            position: absolute;
            top: 0;
          }
          img:nth-child(1) {
            // width: 33px;
            height: 32px;
          }
          .add_img:nth-child(2) {
            width: 15px;
            height: 15px;
            position: absolute;
            top: 0;
          }
        }
        p:nth-child(2) {
          color: #333333;
          font-size: 13px;
          font-family: PingFangSC-Regular;
          margin-top: -2px;
        }
      }
    }
    .img_box1 {
      width: 25%;
      text-align: center;
      div {
        flex: 1;
        p:nth-child(1) {
          margin: 0 auto;
          position: relative;
          .delete_img {
            width: 17px;
            height: 17px;
            position: absolute;
            top: 0;
          }
          img:nth-child(1) {
            // width: 33px;
            height: 32px;
          }
          .add_img:nth-child(2) {
            width: 12px;
            height: 12px;
            position: absolute;
            top: 0;
          }
        }
        p:nth-child(2) {
          color: #333333;
          font-size: 13px;
          font-family: PingFangSC-Regular;
          margin-top: -2px;
        }
      }
    }
  }
  .tips {
    color: #999999;
    font-size: 12px;
    text-align: center;
    margin: 5px 0 15px 0px;
  }
}
.clone_text {
  font-size: 14px;
}
</style>
有脾气的程序媛
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
笔记列表：Draggable 拖拽排序
横竖撇折点
09-22 581
前言 通过上一篇的学习，大家对于 Vue 组件化有了一定的了解。本篇继续使用组件化的思想来实现笔记列表，同时在组件化的基础上，对笔记列表实现拖拽排序的功能。 知识准备 学习之前，先来了解一下 Vue 中完成拖拽排序功能的组件：vue.Draggable。 vue.Draggable 官网是这样介绍该组件的： Vue component (Vue.js 2.0) or directive (V...
vuedraggable实战：结合具体应用场景实现列表内拖拽排序、列表间移动、复制，介绍、安装、使用、坑点及解决方案
热门推荐
学海无涯，行者无疆
12-05 5万+
从实战角度介绍如何使用Draggable实现一个配置功能，用到的关键属性和方法，需要注意的事项，坑点以及解决方案。
基于vuedraggable实现拖拽排序
徐同保的专栏
03-18 780
参考链接： //https://github.com/SortableJS/Vue.Draggable <template> <div> <draggable v-model="myArray" group="people" @end="handleEnd"> <div v-for="(element, index) in myArray" :key="element.id" ..
基于Vue快速实现列表拖拽排序——draggable
qq_37831545的博客
09-27 1306
在业务中列表拖拽排序是比较常见的需求，常见的JS拖拽库有Sortable.js，Vue.Draggable等，大多数同学遇到这种需求也是更多的求助于这些JS库，其实，使用HTML原生的拖放事件来实现拖拽排序并不复杂，结合Vue的transition-group,还能快速的给排序添加过渡动画。
基于vue-draggable 实现三级拖动排序效果
01-19
之前项目中需要用到拖动排序，就去网上找资料，本来最开始是想用jquery-ui里的拖动的，后面发现不符合我的预期也不知道能不能跟vue.js兼容，后面我试过了，单个的可以但是层级太多就不一样了。 废话少说直接上代码 ...
微信小程序代码实现：拖拽排序列表
06-21
在微信小程序开发中，拖拽排序功能是一种提升用户体验的重要手段，尤其在列表管理场景下。本文将详细讲解如何使用`movable-view`和`movable-area`组件来实现这一功能。 `movable-view`和`movable-area`是微信小程序...
JQuery-draggable:可拖动和可排序的代码示例
07-08
在这个"JQuery-draggable:可拖动和可排序的代码示例"中，我们将深入探讨JQuery的draggable和sortable功能。 1. **JQuery draggable**: 这个功能允许用户通过鼠标将元素在页面上拖动。JQuery UI库提供了`.draggable...
【JavaScript源代码】vue实现页面div盒子拖拽排序功能.docx
12-29
在Vue.js中实现页面div元素的拖拽排序功能可以极大地提升用户体验，特别是在构建可自定义布局的应用时。这里我们探讨的是一种基于CSS3 `transition-group` 的方法，它允许我们优雅地实现拖放动画和排序。 首先，让...
vuedraggable+element ui实现页面控件拖拽排序效果
10-17
在实现拖拽排序功能时，我们可以将vuedraggable组件放在el-col组件的外层，这样我们就可以对el-col组件进行拖拽排序了。通过绑定v-model属性，我们可以获取到排序后的el-col组件的顺序。然后，我们可以根据这个顺序...
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
10-16
主要介绍了利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中使用vuedraggable 实现拖拽排序
m0_52948787的博客
09-07 204
vue中使用vuedraggable 实现拖拽排序 安装: yarn add vuedraggable 或 npm i -S vuedraggable 引入 <script> import vuedraggable from 'vuedraggable'; export default { components: {vuedraggable}, } </script> 使用: <template> <vuedraggable class="wrapper"
vue中使用vuedraggable实现图片的拖拽排序以及预览等功能
dekuyu blog
05-09 2364
【代码】vue中使用vuedraggable实现图片的拖拽排序以及预览等功能。
draggable收藏夹拖动排序需求（默认收藏框不参与拖动排序，默认在第一）
weixin_49600762的博客
02-06 267
使用draggable组件实现收藏夹拖动排序需求（默认收藏框不参与拖动排序，默认在第一）
draggable 排序@end=“dragEnd“
weixin_44727080的博客
08-30 496
当使用draggable插件进行拖拽排序时，@end="dragEnd"可以用于更新数据。实现方式是在dragEnd方法中获取拖拽后的排序信息，然后更新数据源。在上面的例子中，我们在dragEnd方法中获取了拖拽后的数据排序，然后重新将数据赋值给items，实现了数据的更新。
vue拖拽排序
qq_38661597的博客
06-08 3004
总结了两种拖拽排序的方法，适用于vue2，vue3。一种是利于元素自带的draggable原生拖拽，一种是使用插件sortablejs，插件也适配移动设备。其中使用插件的时候也遇到一些问题并成功解决。
Vue项目中实现拖拽排序效果-原生支持和拖拽库-draggable-demo
JackieDYH的博客
09-14 2529
draggable属性是 HTML5 新增的可拖拽属性HTML 中，除了图像、链接和选择的文本默认可拖拽外，其他元素默认是不可拖拽的。如果想让其他元素变成可拖拽的，首先需要把draggable属性设置为。
vue 拖拽排序
阿之阿佐
03-27 4575
&lt;template&gt; &lt;section class="main"&gt; &lt;div class="drag-box-left"&gt; &lt;div class="drag-title"&gt;拖动排序&lt;/div&gt; &lt;div class=&quot
使用vuedraggable实现拖拽排序功能
LarrySun
01-04 1222
最近项目中要使用到拖拽功能，于是使用了vuedraggable快速实现，简单记录下使用方法备忘（此插件和sortable.js和awe-dnd很相似） 1、安装插件： cnpm i vuedraggable -save 2、引入 import draggable from 'vuedraggable' 3、使用 html部分 <draggable v-mod...
vue-draggable实现页面
最新发布
10-20
Vue-draggable是一个基于Vue.js的可拖拽和可排序列表组件。它可以帮助开发者快速实现页面元素的拖拽和排序功能。使用Vue-draggable可以轻松地实现拖拽和排序的功能，只需要在Vue组件中引入Vue-draggable组件，并设置相应的属性和事件即可。例如，可以设置可拖拽的元素和容器，以及拖拽和排序的回调函数等。同时，Vue-draggable还支持多种样式和主题，可以根据自己的需求进行定制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值