Vue第 30 篇，SortableJS实现拖拽，SortableJS/Sortable拖拽组件，使用详细（在VueJS中使用SortableJS，SortableJS的安装和使用）

北城笑笑

已于 2024-10-15 15:24:47 修改

阅读量8.3k

点赞数 4

分类专栏： Vue 文章标签：前端 javascript vue.js

于 2023-02-19 18:15:13 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_65793170/article/details/129112442

版权

Vue 专栏收录该内容

89 篇文章

订阅专栏

文章介绍了SortableJS，一个适用于Vue和React的拖拽js库，提供了详细的使用步骤。包括通过npm安装，导入库，以及在Vue和HTML页面中初始化拖拽功能的代码示例，同时设置了拖拽动画过渡时间和排序行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

一. 实现效果

二. 安装依赖

首先，需要在项目中安装相关依赖。请看

npm install sortablejs --save

// 或者

cnpm install sortablejs --save

三. 引入使用

直接在页面引入使用，请看

<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>

实现拖拽的大致流程：

首先需要安装相关依赖：npm install sortablejs --save
相关页面引入使用：import Sortable from "sortablejs"
获取大盒子属性，然后在初始化的时候调用Sortable.create()方法

四. 原生HTML

原生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>