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

男娘i 2023-10-04 21:35 70阅读 0赞

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

####  ####

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

**[SortableJs中文文档![icon-default.png_t_N176][]http://www.sortablejs.com][SortableJs_icon-default.png_t_N176_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>
      
      <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>

#### 效果图如下： ####

![2fff1f879b4e40cba11b027ff70a8807.gif][]

**感觉有用，就一键三连，感谢(●'◡'●)**

[icon-default.png_t_N176]: https://csdnimg.cn/release/blog_editor_html/release2.2.3/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N176
[SortableJs_icon-default.png_t_N176_http_www.sortablejs.com]: http://www.sortablejs.com
[2fff1f879b4e40cba11b027ff70a8807.gif]: https://img-blog.csdnimg.cn/2fff1f879b4e40cba11b027ff70a8807.gif