SortableJS/Sortable拖拽组件，使用详细（Sortablejs安装使用）

news2024/11/15 13:30:06

简述

作为一名前端开发人员，在工作中难免会遇到拖拽功能，分享一个`github`上一个不错的拖拽`js库`，能满足我们在项目开发中的需要，支持`Vue`和`React`，下面是`SortableJS`的使用详细；

这个是sortableJS中文官方文档，记录了一些相关属性和使用方法，页面十分简约方便阅读；

SortableJs中文文档http://www.sortablejs.com

下面是使用详细，主要分为3步;

1、首相需要安装相关依赖：npm install sortablejs --save；

2、页面引入使用：import Sortable from "sortablejs";

3、获取大盒子属性，然后在初始化的使用需要调用Sortable.create()方法；

vue页面使用；

<template>
  <div class="sortable">
    <div id="container" ref="sortableBox">
      <div v-for="(item, index) in arr" :key="item">
        <span>{{ item }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import Sortable from "sortablejs";
export default {
  name: "CodeDemoSortable",

  data() {
    return {
      arr: ["one", "two", "three", "four"],
    };
  },

  mounted() {
    this.defineSortable();
  },

  methods: {
    defineSortable() {
      this.$nextTick(() => {
        const el = this.$refs.sortableBox;
        // 或则使用
        // const el = document.getElementById("container");
        Sortable.create(el, {
          animation: 200,//拖拽动画过渡时间
          group: "name",
          sort: true,
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.sortable {
  #container {
    width: 600px;
    height: 300px;
    margin: 50px auto;
    background-color: skyblue;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    div {
      height: 20%;
      text-align: center;
      line-height: 50px;
      width: 100%;
      background-color: plum;
    }
  }
}
</style>

html页面使用；

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 600px;
      height: 300px;
      margin: 50px auto;
      background-color: skyblue;
      padding: 20px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    .container>div {
      height: 20%;
      text-align: center;
      line-height: 52px;
      width: 100%;
      background-color: plum;
    }
  </style>
</head>

<body>
  <div class="container">
    <div>one</div>
    <div>two</div>
    <div>three</div>
  </div>
  <!-- 引入js文件，也可以把js文件下载到本地使用 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
  <script>
    const el = document.querySelector('.container')
    // 初始化
    var sortable = Sortable.create(el, {
      animation: 200,//拖拽动画过渡时间
      group: "name",
      sort: true
    });
  </script>
</body>

</html>