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

北城笑笑

已于 2024-07-22 18:57:30 修改

阅读量6.3k

点赞数 4

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

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

本文链接：https://blog.csdn.net/weixin_65793170/article/details/129112442

版权

VueJS 同时被 2 个专栏收录

72 篇文章 2 订阅

订阅专栏

JavaScript

37 篇文章 1 订阅

订阅专栏

前言

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

VueJS ～第 28 篇 —— 在VueJS中使用SortableJS实现拖拽

目录（实现拖拽，可以大致分为3步）

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

2. 相关页面引入使用：import Sortable from "sortablejs"

3. 获取大盒子属性，然后在初始化的时候调用Sortable.create()方法

一. 首先，需要安装相关依赖

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>

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

四. 这个是sortableJS中文官方文档（页面十分简约，方便阅读）。更多属性和使用方法，请看

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

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

北城笑笑

关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
5
评论
Vue第28篇，SortableJS实现拖拽，SortableJS/Sortable拖拽组件，使用详细（在VueJS中使用SortableJS，SortableJS的安装和使用）

⭐SortableJs中文文档http://www.sortablejs.com下面是使用详细，主要分为3步;1、首相需要安装相关依赖：npm install sortablejs --save；2、页面引入使用：import Sortable from "sortablejs";3、获取大盒子属性，然后在初始化的使用需要调用方法；html页面使用；感觉有用，就一键三连，感谢(●'◡'●)
复制链接

扫一扫