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

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

news 2026/4/7 3:49:46

简述

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

 

效果图如下：

2fff1f879b4e40cba11b027ff70a8807.gif

 

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

 

相关文章：

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

简述 作为一名前端开发人员&#xff0c;在工作中难免会遇到拖拽功能&#xff0c;分享一个github上一个不错的拖拽js库&#xff0c;能满足我们在项目开发中的需要&#xff0c;支持Vue和React&#xff0c;下面是SortableJS的使用详细&#xff1b; 这个是sortableJS中文官方文档&…...

编程日记 2023/5/6 0:58:14

Heartbeat+Nginx实验

HeartbeatNginx实验 Heartbeat是什么&#xff1f; Heartbeat是 Linux-HA 工程的一个组件&#xff0c;自1999 年开始到现在&#xff0c;发布了众多版本&#xff0c;是目前开源 Linux-HA项 目成功的一个例子&#xff0c;在行业内得到了广泛的应用 构建规划&#xff1a; 两台后…...

编程日记 2023/5/8 11:51:34

JavaEE|网络编程之套接字 TCP

文章目录一、ServerSocket API构造方法常用方法二、Socket API构造方法常用方法注意事项三、TCP中的长短连接E1:一发一收&#xff08;短连接&#xff09;E2:请求响应&#xff08;短连接&#xff09;E3&#xff1a;多线程下的TCP回响服务器说明&#xff1a;这部分说实话有点懵&a…...

编程日记 2023/5/5 15:13:36

Robot Framework自动化测试---元素定位

不要误认为Robot framework 只是个web UI测试工具&#xff0c;更正确的理解Robot framework是个测试框架&#xff0c;之所以可以拿来做web UI层的自动化是国为我们加入了selenium2的API。比如笔者所处工作中&#xff0c;更多的是拿Robot framework来做数据库的接口测试&#xf…...

编程日记 2023/5/5 15:14:54

ASP.NET Core中的路由

传统路由 app.MapControllerRoute( name: "default", pattern: "{controllerHome}/{actionIndex}/{id?}"); MapControllerRoute用于创建单个路由。 单个路由命名为 default 路由 。大多数具有控制器和视图的应用都使用类似 default 路由的路由模板。 之所…...

编程日记 2023/4/26 6:53:55

VBA提高篇_26 Textbox多行_ListBox_ComboBox

文章目录1. 文本框多行换行2. ListBox: 列表框2.1 列表框中添加条目的三种方法:3. ComboBox 组合框: 属性方法等同于以上ListBox1. 文本框多行换行 MultiLine: 控制文本框多行自动换行() Enterkeybehevior: True 代表允许在文本框中使用回车键换行 WordWrap: True 代表自动换…...

编程日记 2023/4/27 6:54:54

python环境配置

python环境配置一、ADB环境配置1、ADB下载路径:2、点击下载3、解压并放到本地磁盘4、配置ADB环境变量二、Python环境配置1、Python下载路径:2、点击下载(默认下载最新的)3、解压并放到本地磁盘4、配置Python环境变量5、配置pip环境变量三、Pycharm安装1、pycharm下载路径:2、点…...

编程日记 2023/4/28 11:31:15

集算器连接外部库

1. 配置jar包将以下jar包从报表的类路径&#xff08;【安装根目录】\report\lib或【安装根目录】\report\web\webapps\demo\WEB-INF\lib&#xff09;中拷贝到集算器目录&#xff08;【安装根目录】\esProc\ extlib\mongoCli&#xff09;&#xff1b;润乾外部库核心jar为:scu-mo…...

编程日记 2023/5/7 2:39:55

力扣刷题|216.组合总和 III、17.电话号码的字母组合

文章目录LeetCode 216.组合总和题目链接&#x1f517;思路LeetCode 17.电话号码的字母组合题目链接&#x1f517;思路LeetCode 216.组合总和 题目链接&#x1f517; LeetCode 216.组合总和 思路 本题就是在[1,2,3,4,5,6,7,8,9]这个集合中找到和为n的k个数的组合。 相对于7…...

编程日记 2023/5/6 11:42:36

机器学习笔记之谱聚类(一)k-Means聚类算法介绍

机器学习笔记之谱聚类——K-Means聚类算法介绍引言回顾&#xff1a;高斯混合模型聚类任务基本介绍距离计算k-Means\text{k-Means}k-Means算法介绍k-Means\text{k-Means}k-Means算法示例k-Means\text{k-Means}k-Means算法与高斯混合模型的关系k-Means\text{k-Means}k-Means算法的…...

编程日记 2023/4/24 2:45:45

云原生周刊 | 2023 年热门：云 IDE、Web Assembly 和 SBOM | 2023-02-20

在 CloudNative SecurityCon 上&#xff0c;云原生计算基金会的首席技术官 Chris Aniszczyk 在 The New Stack Makers 播客的这一集中强调了 2023 年正在形成几个趋势&#xff1a; 随着 GitHub 的 Codespaces 平台通过集成到 GitHub 服务中获得认可&#xff0c;云 IDE&#xf…...

编程日记 2023/4/18 17:51:42

python 打包EXE

注&#xff1a; 从个人博客园 移植而来 环境&#xff1a; Windows7 Python 2.7 参考&#xff1a; 使用pyinstaller打包python程序 Pyinstaller 打包发布经验总结 Using PyInstaller 简介 使用python引用第三方的各种模块编写一个工具后&#xff0c;如果想发给其他人&…...

编程日记 2023/5/3 21:56:38

CANopen概念总结、心得体会

NMT网络管理报文&#xff1a; NMT 主机和 NMT 从机之间通讯的报文就称为 NMT 网络管理报文。常见报文说明&#xff1a; 0101---------------网络报文发送Nmt_Start_Node&#xff0c;让电机进入OP模式(此时还不会发送同步信号) setState(d, Operational)------------------开启…...

编程日记 2023/5/6 3:29:44

【2】MYSQL数据的导入与导出

文章目录 MYSQL-库（相同库名称）的导入导出MYSQL-库（不同库名称）的导入导出MYSQL-表的导入导出MYSQL-表的指定查询记录导入导出前提： 客户端工具是：SQLyog MYSQL-库（相同库名称）的导入导出 1、选中指定库——右键，选择【将数据库复制到不同的主机/数据库】 2、选中指…...

编程日记 2023/5/10 3:02:06

Kaggle系列之CIFAR-10图像识别分类(残差网络模型ResNet-18)

CIFAR-10数据集在计算机视觉领域是一个很重要的数据集&#xff0c;很有必要去熟悉它&#xff0c;我们来到Kaggle站点&#xff0c;进入到比赛页面&#xff1a;https://www.kaggle.com/competitions/cifar-10CIFAR-10是8000万小图像数据集的一个子集&#xff0c;由60000张32x32彩…...

编程日记 2023/5/1 0:27:48

ESP-C3入门11. 创建最基本的HTTP请求

ESP-C3入门11. 创建最基本的HTTP请求一、menuconfig配置二、配置 CMakeLists1. 设置项目的额外组件目录2. 设置头文件搜索目录三、在 ESP32 上执行 HTTP 请求的基本步骤1. 创建 TCP 连接2. 设置 HTTP 请求3. 发送 HTTP 请求4. 接收 HTTP 响应5. 处理 HTTP 响应6. 关闭 TCP 连接…...

编程日记 2023/5/4 23:56:40

K8S+Jenkins+Harbor+Docker+gitlab集群部署

K8SJenkinsHarborDockergitlab服务器集群部署 目录K8SJenkinsHarborDockergitlab服务器集群部署1.准备以下服务器2.所有服务器统一处理执行2.1 关闭防火墙2.2 关闭selinux2.3 关闭swap&#xff08;k8s禁止虚拟内存以提高性能&#xff09;2.4 更新yum (看需要更新)2.5 时间同步2…...

编程日记 2023/5/9 15:27:32

看见统计——第四章 统计推断：频率学派

看见统计——第四章 统计推断&#xff1a;频率学派 接下来三节的主题是中心极限定理的应用。在不了解随机变量序列 {Xi}\{X_i\}{Xi​} 的潜在分布的情况下&#xff0c;对于大样本量&#xff0c;中心极限定理给出了关于样本均值的声明。例如&#xff0c;如果 YYY 是一个 N(0&am…...

编程日记 2023/5/6 19:31:49

2023年2月访问学者博士后热门国家出入境政策变化汇总

近期关于出国的咨询量日益增多&#xff0c;出入境政策也是其中之一。所以本期知识人网小编汇总了最新访问学者和博士后关注的热门国家及地区入境政策变化&#xff0c;提供给大家。目前各国入境政策大致分为三种&#xff1a;一、 无法入境的国家如&#xff1a;摩洛哥、朝鲜等。二…...

编程日记 2023/4/30 12:52:32

“离开浪浪山”是假象，80%年轻人下班后还在学习，真实是想先上个山。

最近&#xff0c;又有一个关于年轻人与职场的新词横空出世—— 浪浪山。 什么是浪浪山&#xff1f; 每个人心中都有一座浪浪山。 浪浪山&#xff0c;其实是人生的一种状态&#xff0c;步入社会时满腔热血&#xff0c;然而很快就被现实给修理了一顿&#xff1b;想要辞职不干出去…...

编程日记 2023/5/7 15:15:17

三维空间智能体（3D Spatial Agent）的目标连续感知与主动控制技术体系研究与应用：专家评审18问18答

一、学术与原理类&#xff08;1–6&#xff09;Q1&#xff1a;你们所谓“像素即坐标”&#xff0c;在理论上如何成立&#xff1f;误差如何界定&#xff1f;A&#xff1a; 基于多视角几何与相机内外参标定&#xff0c;将像素反投影为空间射线&#xff0c;通过多视角交汇&#xf…...

编程新知 2026/4/7 3:33:04

知识库别往System Prompt塞了！我用Skill Loading把3000 tokens压缩到100，省下66%成本

上篇我们诊断了System Prompt膨胀病&#xff0c;这篇给解药。 用Skill Loading机制把3000 tokens的垃圾场变成100 tokens的图书馆&#xff0c;60行代码实现知识按需加载&#xff0c;API成本直接砍半。 Skill Loading核心机制 类比&#xff1a;图书馆借书流程 图书馆不会把所有书…...

编程新知 2026/4/7 3:22:55

终极热键冲突检测指南：3分钟定位Windows快捷键失效元凶

终极热键冲突检测指南&#xff1a;3分钟定位Windows快捷键失效元凶 【免费下载链接】hotkey-detective A small program for investigating stolen key combinations under Windows 7 and later. 项目地址: https://gitcode.com/gh_mirrors/ho/hotkey-detective 你是否曾…...

编程新知 2026/4/6 21:40:12

效率提升利器：快马一键生成网络配置脚本与故障排查模拟环境

最近在准备计算机三级网络技术考试&#xff0c;发现手动搭建实验环境和编写配置脚本特别耗时。为了提升学习效率&#xff0c;我用InsCode(快马)平台开发了一个网络技术练习工具&#xff0c;分享下实现思路和使用体验。 核心功能设计 这个工具主要解决三个痛点&#xff1a;配置脚…...

编程新知 2026/4/6 20:53:34

ICLR 2026 | 大模型当裁判也“翻车“？北大清华联合多校提出TrustJudge，让LLM评估更值得信赖

让 GPT-4 给两篇文章打分&#xff0c;A 拿了 4 分、B 拿了 3 分。按常理 A 应该比 B 好吧&#xff1f;但换成成对比较&#xff0c;同一个模型却说 "B 更好"。更离谱的情况也有——A > B > C > A 的"石头剪刀布"循环&#xff0c;连传递性都守不住。…...

编程新知 2026/4/6 19:45:06

解锁专业显示控制：ColorControl让NVIDIA显卡和LG电视完美协作

解锁专业显示控制&#xff1a;ColorControl让NVIDIA显卡和LG电视完美协作 【免费下载链接】ColorControl Easily change NVIDIA display settings and/or control LG TVs 项目地址: https://gitcode.com/gh_mirrors/co/ColorControl 你是否曾为Windows系统显示设置的局限…...

编程新知 2026/4/6 19:14:50

CD4(分化簇4)：免疫共受体的核心机制与抗体药物研发逻辑

CD4&#xff08;分化簇4&#xff0c;Cluster of Differentiation 4&#xff09;作为辅助性T细胞的关键标志物与免疫应答的核心共受体&#xff0c;不仅在适应性免疫中扮演“指挥官”角色&#xff0c;更是感染性疾病与自身免疫病药物研发的重要靶点。本文从分子结构、信号转导机制…...

编程新知 2026/4/6 16:59:16

nginx-proxy-automation升级与迁移指南：平滑过渡到新版本

nginx-proxy-automation升级与迁移指南&#xff1a;平滑过渡到新版本 【免费下载链接】nginx-proxy-automation Automated docker nginx proxy integrated with letsencrypt. 项目地址: https://gitcode.com/gh_mirrors/ng/nginx-proxy-automation nginx-proxy-automati…...

编程新知 2026/4/6 16:51:13

Arduino非阻塞编程：Pin与WaitDo轻量级嵌入式工具库

1. 项目概述HDW-Utils 是一个面向 Arduino 平台的轻量级嵌入式工具库&#xff0c;其核心设计目标并非提供底层硬件驱动&#xff0c;而是解决嵌入式开发中高频出现的代码重复性、结构松散性与阻塞式延时滥用三大工程痛点。该库以“硬件开发者的实用主义”为出发点&#xff0c;通…...

编程新知 2026/4/6 15:48:37

【多机器人路径规划】基于MRPP或MAPF的多机器人路径规划算法研究附matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。&#x1f447; 关注我领取海量matlab电子书和数学建模资料&#x1f34a;个人信条&#xff1a;格物致知,完整Matl…...

编程新知 2026/4/6 15:04:15