【Sortable】前端拖拽库 | vue使用与数据排序原理

视觉CG

已于 2024-04-14 16:53:30 修改

阅读量790

点赞数 1

分类专栏： JS 文章标签：前端 javascript

于 2023-07-31 10:50:11 首次发布

本文链接：https://blog.csdn.net/qq_43614372/article/details/132016965

版权

JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue项目中使用SortableJS库进行拖拽排序，包括npm安装、关键函数onSort的使用，以及在拖拽排序中处理数据的方法。同时强调了使用中必须设置唯一key的重要性，并提供了示例代码展示具体的实现过程。

摘要由CSDN通过智能技术生成

前言

官网 - http://www.sortablejs.com/index.html
中文文档 - https://www.itxst.com/sortablejs/neuinffi.html
npm - https://www.npmjs.com/package/sortablejs

npm下载

npm i sortablejs

vue中使用的例子

拖拽的数据排序规则

在onSort函数里进行排序数据
onSort|function(evt) - 元素位置发生改变时触发
- evt -当前拖拽的实例
  - 有2个重要的排序信息，解构出来：const { oldIndex, newIndex } = evt
    - oldIndex|Number - 元素拖拽前的位置下标
    - newIndex|Number - 元素拖拽后的位置下标
根据newIndex 、oldIndex进行数据排序。

vue中使用的注意事项

必须有key，且key不能重复
没有key、key重复。会出现不可预知的问题，例如更新数据元素没有渲染

Test.vue

<template>
  <div class="box">
    <div class="item" v-for="it in data" :key="it.id">{{ it.title }}</div>
  </div>
</template>
   
 <script setup>
import { onMounted, ref } from "vue";
import Sortable from "sortablejs";

const data = ref([
  {
    id: "1",
    title: "帅哥1",
  },
  {
    id: "2",
    title: "帅哥2",
  },
  {
    id: "3",
    title: "帅哥3",
  },
  {
    id: "4",
    title: "帅哥4",
  },
  {
    id: "5",
    title: "帅哥5",
  },
]);

/**
 * 拖拽数据排序
 * @param {Array} data 更新的数据
 * @param {Number} oldIndex 旧下标
 * @param {Number} newIndex 新下标
 */
function refReshStarDataSort(data, oldIndex, newIndex) {
  const absVal = Math.abs(oldIndex - newIndex);

  if (absVal > 1) {
    const spliceData = data[oldIndex];
    data.splice(oldIndex, 1);
    data.splice(newIndex, 0, spliceData);
  } else {
    data.splice(oldIndex, 1, ...data.splice(newIndex, 1, data[oldIndex]));
  }

  /**
   * !更新数据排序
   */
  console.log("更新数据排序:", data);
}
onMounted(() => {
  new Sortable(document.querySelector(".box"), {
    group: "user-drag", // 拖拽名称组
    animation: 520, //动画过渡
    easing: "cubic-bezier(0, 0.55, 0.45, 1)", //缓动效果
    // handle: ".drag-handle", // 拖拽句柄
    draggable: ".item", // 拖拽元素class
    forceFallback: true, //取消半透明状态
    ghostClass: "op-0", // 拖拽的元素class，固定的不会跑的那个元素
    dragClass: "draging", //拖拽中的元素clas,拖着到处跑的那个元素
    onSort: (evt) => {
      const { oldIndex, newIndex } = evt;
      refReshStarDataSort(data.value, oldIndex, newIndex);
    },
  });
});
</script> 

<style lang="sass">
.draging
  opacity: 1 !important

.op-0
  opacity: 0
</style>

vue运行结果

在这里插入图片描述

拖拽句柄解释

如下图

假如设置了拖拽句柄，要拖拽红框的元素，黄框就是拖拽句柄。
只有当拖拽句柄才能拖拽红框元素

在这里插入图片描述

CDN使用Demo

demo.html

<style>
    .box {
      width: 200px;
      max-width: 220px;
    }

    .item,
    .title {
      display: flex;
      justify-content: space-between;
      height: 30px;
      align-items: center;
      border: solid 1px #ccc;
      border-style: none none solid solid;
    }

    .title {
      background-color: #f4f4f4;
    }

    .move {
      background-color: rgb(116, 199, 202);
      width: 30px;
      height: 100%;
      cursor: grab;
    }

    .move:hover {
      background-color: cadetblue;
    }

    /* 拖拽样式 */
    .drop-select {
      background: rgba(18, 188, 255, 0.25);
    }
  </style>
  <body>
    <div class="box">
      <!-- .item拖拽的元素 -->
      <div class="item">
        <div class="item-grid">文本1</div>
        <!-- .move 拖拽的句柄 -->
        <div class="move"></div>
      </div>
      <div class="item">
        <div class="item-grid">文本2</div>
        <div class="move"></div>
      </div>
      <div class="item">
        <div class="item-grid">文本3</div>
        <div class="move"></div>
      </div>
      <div class="item">
        <div class="item-grid">文本4</div>
        <div class="move"></div>
      </div>
      <div class="item">
        <div class="item-grid">文本5</div>
        <div class="move"></div>
      </div>
      <div class="item">
        <div class="item-grid">文本6</div>
        <div class="move"></div>
      </div>
      <div class="title">更多</div>
      <div class="item">
        <div class="item-grid">6666</div>
        <div class="move"></div>
      </div>
      <div class="item">
        <div class="item-grid">7777</div>
        <div class="move"></div>
      </div>
      <div class="item">
        <div class="item-grid">520</div>
        <div class="move"></div>
      </div>
    </div>
    <script src="https://www.itxst.com/package/sortable/sortable.min.js"></script>
    <script>
      const el = document.querySelector(".box");
      new Sortable(el, {
        group: { name: "group1", pull: true, put: true },
        filter: ".title", // 过滤
        draggable: ".item", //拖拽的元素
        animation: 300, //动画时间
        handle: ".move", //拖拽句柄  - 就是要拖拽的子元素
        easing: "cubic-bezier(0.16, 1, 0.3, 1)", //动效
        ghostClass: "drop-select", //拖拽class
      });
    </script>
  </body>