当前位置：首页 > news >正文

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

news 2025/9/2 4:02:33

简述

作为一名前端开发人员，在工作中难免会遇到拖拽功能，分享一个`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>