SortableJS/Sortable拖拽组件，使用详细（Sortablejs安装使用）
简述
作为一名前端开发人员，在工作中难免会遇到拖拽功能，分享一个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>
效果图如下：
感觉有用，就一键三连，感谢(●'◡'●)
相关文章：
SortableJS/Sortable拖拽组件，使用详细（Sortablejs安装使用）
简述 作为一名前端开发人员，在工作中难免会遇到拖拽功能，分享一个github上一个不错的拖拽js库，能满足我们在项目开发中的需要，支持Vue和React，下面是SortableJS的使用详细； 这个是sortableJS中文官方文档&…...
Heartbeat+Nginx实验
HeartbeatNginx实验 Heartbeat是什么？ Heartbeat是 Linux-HA 工程的一个组件，自1999 年开始到现在，发布了众多版本，是目前开源 Linux-HA项 目成功的一个例子，在行业内得到了广泛的应用 构建规划： 两台后…...
JavaEE|网络编程之套接字 TCP
文章目录一、ServerSocket API构造方法常用方法二、Socket API构造方法常用方法注意事项三、TCP中的长短连接E1:一发一收（短连接）E2:请求响应（短连接）E3：多线程下的TCP回响服务器说明：这部分说实话有点懵&a…...
Robot Framework自动化测试---元素定位
不要误认为Robot framework 只是个web UI测试工具，更正确的理解Robot framework是个测试框架，之所以可以拿来做web UI层的自动化是国为我们加入了selenium2的API。比如笔者所处工作中，更多的是拿Robot framework来做数据库的接口测试…...
ASP.NET Core中的路由
传统路由 app.MapControllerRoute( name: "default", pattern: "{controllerHome}/{actionIndex}/{id?}"); MapControllerRoute用于创建单个路由。 单个路由命名为 default 路由 。大多数具有控制器和视图的应用都使用类似 default 路由的路由模板。 之所…...
VBA提高篇_26 Textbox多行_ListBox_ComboBox
文章目录1. 文本框多行换行2. ListBox: 列表框2.1 列表框中添加条目的三种方法:3. ComboBox 组合框: 属性方法等同于以上ListBox1. 文本框多行换行 MultiLine: 控制文本框多行自动换行() Enterkeybehevior: True 代表允许在文本框中使用回车键换行 WordWrap: True 代表自动换…...
python环境配置
python环境配置一、ADB环境配置1、ADB下载路径:2、点击下载3、解压并放到本地磁盘4、配置ADB环境变量二、Python环境配置1、Python下载路径:2、点击下载(默认下载最新的)3、解压并放到本地磁盘4、配置Python环境变量5、配置pip环境变量三、Pycharm安装1、pycharm下载路径:2、点…...
集算器连接外部库
1. 配置jar包将以下jar包从报表的类路径（【安装根目录】\report\lib或【安装根目录】\report\web\webapps\demo\WEB-INF\lib）中拷贝到集算器目录（【安装根目录】\esProc\ extlib\mongoCli）；润乾外部库核心jar为:scu-mo…...
力扣刷题|216.组合总和 III、17.电话号码的字母组合
文章目录LeetCode 216.组合总和题目链接🔗思路LeetCode 17.电话号码的字母组合题目链接🔗思路LeetCode 216.组合总和 题目链接🔗 LeetCode 216.组合总和 思路 本题就是在[1,2,3,4,5,6,7,8,9]这个集合中找到和为n的k个数的组合。 相对于7…...
机器学习笔记之谱聚类(一)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算法与高斯混合模型的关系k-Means\text{k-Means}k-Means算法的…...
云原生周刊 | 2023 年热门：云 IDE、Web Assembly 和 SBOM | 2023-02-20
在 CloudNative SecurityCon 上，云原生计算基金会的首席技术官 Chris Aniszczyk 在 The New Stack Makers 播客的这一集中强调了 2023 年正在形成几个趋势： 随着 GitHub 的 Codespaces 平台通过集成到 GitHub 服务中获得认可，云 IDE…...
python 打包EXE
注： 从个人博客园 移植而来 环境： Windows7 Python 2.7 参考： 使用pyinstaller打包python程序 Pyinstaller 打包发布经验总结 Using PyInstaller 简介 使用python引用第三方的各种模块编写一个工具后，如果想发给其他人&…...
CANopen概念总结、心得体会
NMT网络管理报文： NMT 主机和 NMT 从机之间通讯的报文就称为 NMT 网络管理报文。常见报文说明： 0101---------------网络报文发送Nmt_Start_Node，让电机进入OP模式(此时还不会发送同步信号) setState(d, Operational)------------------开启…...
【2】MYSQL数据的导入与导出
文章目录 MYSQL-库（相同库名称）的导入导出MYSQL-库（不同库名称）的导入导出MYSQL-表的导入导出MYSQL-表的指定查询记录导入导出前提： 客户端工具是：SQLyog MYSQL-库（相同库名称）的导入导出 1、选中指定库——右键，选择【将数据库复制到不同的主机/数据库】 2、选中指…...
Kaggle系列之CIFAR-10图像识别分类(残差网络模型ResNet-18)
CIFAR-10数据集在计算机视觉领域是一个很重要的数据集，很有必要去熟悉它，我们来到Kaggle站点，进入到比赛页面：https://www.kaggle.com/competitions/cifar-10CIFAR-10是8000万小图像数据集的一个子集，由60000张32x32彩…...
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 连接…...
K8S+Jenkins+Harbor+Docker+gitlab集群部署
K8SJenkinsHarborDockergitlab服务器集群部署 目录K8SJenkinsHarborDockergitlab服务器集群部署1.准备以下服务器2.所有服务器统一处理执行2.1 关闭防火墙2.2 关闭selinux2.3 关闭swap（k8s禁止虚拟内存以提高性能）2.4 更新yum (看需要更新)2.5 时间同步2…...
看见统计——第四章 统计推断：频率学派
看见统计——第四章 统计推断：频率学派 接下来三节的主题是中心极限定理的应用。在不了解随机变量序列 {Xi}\{X_i\}{Xi} 的潜在分布的情况下，对于大样本量，中心极限定理给出了关于样本均值的声明。例如，如果 YYY 是一个 N(0&am…...
2023年2月访问学者博士后热门国家出入境政策变化汇总
近期关于出国的咨询量日益增多，出入境政策也是其中之一。所以本期知识人网小编汇总了最新访问学者和博士后关注的热门国家及地区入境政策变化，提供给大家。目前各国入境政策大致分为三种：一、 无法入境的国家如：摩洛哥、朝鲜等。二…...
“离开浪浪山”是假象，80%年轻人下班后还在学习，真实是想先上个山。
最近，又有一个关于年轻人与职场的新词横空出世—— 浪浪山。 什么是浪浪山？ 每个人心中都有一座浪浪山。 浪浪山，其实是人生的一种状态，步入社会时满腔热血，然而很快就被现实给修理了一顿；想要辞职不干出去…...
Python爬虫实战：研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中，时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志，到供应链系统的物流节点时间戳，时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库，其日期时间类型的…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。 核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...
PHP和Node.js哪个更爽?
先说结论，rust完胜。 php：laravel，swoole，webman，最开始在苏宁的时候写了几年php，当时觉得php真的是世界上最好的语言，因为当初活在舒适圈里，不愿意跳出来，就好比当初活在…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。 今天是六一儿童节，小蓝老师为了让大家在节…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
HashMap中的put方法执行流程（流程图）
1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中，其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下： 初始判断与哈希计算： 首先，putVal 方法会检查当前的 table（也就…...
day36-多路IO复用
一、基本概念 （服务器多客户端模型） 定义：单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用：应用程序通常需要处理来自多条事件流中的事件，比如我现在用的电脑，需要同时处理键盘鼠标…...
群晖NAS如何在虚拟机创建飞牛NAS
套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...