SortableJS:vuedraggable实现元素拖放排序

  • 文档:https://sortablejs.github.io/Sortable/
  • github:https://github.com/SortableJS/Sortable
  • Vue2: https://github.com/SortableJS/Vue.Draggable
  • Vue3: https://github.com/SortableJS/vue.draggable.next
  • npm https://www.npmjs.com/package/vuedraggable
# vue2
npm install vuedraggable --save# vue3
npm install vuedraggable@next --save

Vue3示例

实现效果

在这里插入图片描述

实现代码

<template><draggablev-model="myArray"item-key="id"><template #item="{ element }"><div class="draggable__item">{{ element.name }}</div></template></draggable>
</template><script>
// created at 2023-11-01import draggable from 'vuedraggable'export default {components: {draggable,},data() {return {myArray: [{ name: '苹果' },{ name: '香蕉' },{ name: '桔子' },{ name: '草莓' },],}},
}
</script><style lang="less">
.draggable__item {background-color: green;color: #fff;line-height: 30px;width: 200px;text-align: center;margin-bottom: 10px;cursor: move;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/129194.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

k8s-服务网格实战-入门Istio

istio-01.png 背景 终于进入大家都比较感兴趣的服务网格系列了&#xff0c;在前面已经讲解了&#xff1a; 如何部署应用到 kubernetes服务之间如何调用如何通过域名访问我们的服务如何使用 kubernetes 自带的配置 ConfigMap 基本上已经够我们开发一般规模的 web 应用了&#xf…

c++-二叉树进阶

文章目录 前言一、二叉搜索树1、二叉搜索树介绍2、二叉搜索树循环实现3、二叉搜索树递归实现4、二叉搜索树的性能分析5、二叉搜索树的应用6、二叉树练习题6.1 根据二叉树创建字符串6.2 二叉树的层序遍历6.3 二叉树的层序遍历 II6.4 二叉树的最近公共祖先6.5 二叉搜索树与双向链…

ElasticSearch搜索技术深入与聚合查询实战

ES分词器详解 基本概念 分词器官方称之为文本分析器&#xff0c;顾名思义&#xff0c;是对文本进行分析处理的一种手段&#xff0c;基本处理逻辑为按照预先制定的分词规则&#xff0c;把原始文档分割成若干更小粒度的词项&#xff0c;粒度大小取决于分词器规则。 分词发生时…

R语言绘图-5-条形图(修改坐标轴以及图例等)

0. 说明&#xff1a; 1. 绘制条形图&#xff1b; 2. 添加文本并调整位置&#xff1b; 3. 调整x轴刻度的字体、角度及颜色&#xff1b; 4. 在导出pdf时&#xff0c;如果没有字体&#xff0c;该怎么解决问题&#xff1b; 1. 结果&#xff1a; 2. 代码&#xff1a; library(ggp…

文本批量处理,一键转换HTML文件编码,释放您的繁琐工作!

亲爱的用户&#xff0c;您是否曾经为需要手动转换HTML文件编码而耗费大量时间和精力而感到困扰&#xff1f;现在&#xff0c;我们为您提供了一款强大的文本批量处理工具&#xff01;让您一键将HTML文件编码进行转换&#xff0c;轻松释放您的繁琐工作&#xff01; 首先&#xf…

【带货案例】从美区十月带货达人身上寻找商品爆款秘诀!

2023只剩下最后两个月&#xff0c;年底也是各大商家冲刺卖货的黄金时期&#xff01; 带货过程中的一个重要环节即【达人营销】&#xff0c;背受跨境卖家关注。 下面选取美区十月带货达人TOP3&#xff0c;分析其带货秘诀。 据超店有数达人榜单显示&#xff1a;美区十月带货达人…

Qt中正确的设置窗体的背景图片的几种方式

Qt中正确的设置窗体的背景图片的几种方式 QLabel加载图片方式之一Chapter1 Qt中正确的设置窗体的背景图片的几种方式一、利用styleSheet设置窗体的背景图片 Chapter2 Qt的主窗口背景设置方法一&#xff1a;最简单的方式是通过ui界面来设置&#xff0c;例如设置背景图片方法二 &…

leetCode 198.打家劫舍 动态规划入门:从记忆化搜索到递推

leetCode 198.打家劫舍 198. 打家劫舍 - 力扣&#xff08;LeetCode&#xff09; 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一…

LuaHttp库写的一个简单的爬虫

LuaHttp库是一个基于Lua语言的HTTP客户端库&#xff0c;可以用于爬取网站数据。与Python的Scrapy框架类似&#xff0c;LuaHttp库也可以实现网站数据的抓取&#xff0c;并且可以将抓取到的数据保存到数据库中。不过需要注意的是&#xff0c;LuaHttp库并不像Scrapy框架那样具有完…

3 数据库系统核心知识点

一、事务 先回顾一下事务的概念&#xff1a; 事务指的是满足 ACID 特性的一组操作&#xff0c;可以通过 Commit 提交一个事务&#xff0c;也可以使用 Rollback 进行回滚ACID 1. 原子性(Atomicity) 1.事务被视为不可分割的最小单元&#xff0c;事务的所有操作要么全部提交成…

pytorch dropout 置零 + 补偿性放缩

一句话概括&#xff1a;&#xff08;训练过程中&#xff09;Dropout 操作 随机置零 非置零元素进行后补偿性放缩。以保证dropout前后数据scale不变。 详细解释(来自chatgpt): 在 PyTorch 中&#xff0c;dropout 的操作不仅仅是将某些元素置零。为了确保期望输出在训练和测试…

Java NIO 编程

1. 简介 Java NIO 是 JDK 1.4 中引入的新的 IO 方式&#xff0c;它主要包含 Buffer、Channel、Selector 这三个核心的组件&#xff0c;它与传统 IO 的区别如下&#xff1a; NIO IO 面向缓冲 面向流 同步非阻塞 同步阻塞 多路复用&#xff08;选择器&#xff09; 无 1.1…

php语言

文章目录 常用命令Apache命令php命令 常用命令 Apache命令 查看版本号 D:\cjm\soft-work\phpStudy\phpstudy_pro\Extensions\Apache2.4.39\bin>httpd -v检测运行环境 httpd -tphp命令 PHP版本号 需要进入php目录 php -v

人工智能-深度学习计算:层和块

我们关注的是具有单一输出的线性模型。 在这里&#xff0c;整个模型只有一个输出。 注意&#xff0c;单个神经网络 &#xff08;1&#xff09;接受一些输入&#xff1b; &#xff08;2&#xff09;生成相应的标量输出&#xff1b; &#xff08;3&#xff09;具有一组相关 参数…

我的创作纪念日--AI小怪兽打怪进阶路

目录 自我介绍 时间轴 收获 日常 成就 憧憬 自我介绍 希望您持续关注AI小怪兽的不断进化、打怪&#xff01;&#xff01;&#xff01; AI小怪兽&#xff1a;1&#xff09;YOLO骨灰级玩家&#xff0c;YOLOv5、v7、v8优化创新&#xff0c;复现计算机视觉顶会&#xff0c;…

k8s的概念

概念 它是一种开源的容器编排平台&#xff0c;用于自动化部署&#xff0c;扩展和管理容器化的应用程序&#xff0c;它提供了一种容器编排和管理的方式&#xff0c;可以帮助开发人员更轻松地管理容器化的的应用程序&#xff0c;并且提供了一种跨多个主机的自动化部署和管理机制…

[python 刷题] 2866 Beautiful Towers II

[python 刷题] 2866 Beautiful Towers II 题目如下&#xff1a; You are given a 0-indexed array maxHeights of n integers. You are tasked with building n towers in the coordinate line. The ith tower is built at coordinate i and has a height of heights[i]. A co…

Win YAPI + Jenkins 实现接口自动化测试

自动化测试 传统的接口自动化测试成本高&#xff0c;大量的项目没有使用自动化测试保证接口的质量&#xff0c;仅仅依靠手动测试&#xff0c;是非常不可靠和容易出错的。 为了解决这个问题&#xff0c;使用YAPI接口自动化测试功能&#xff0c;只需要配置每个接口的入参和对 RE…

windows docker desktop 更换镜像 加速

最近 docker hub 访问不了; 经过研究 可以通过添加 代理镜像网址 添加代理服务器的方式 实现完美访问 1添加镜像网站 修改成国内镜像地址就能享受到飞一般的速度&#xff0c;但有一个问题&#xff0c;部分站点镜像不全或者镜像比较老&#xff0c;建议使用多个镜像站。 https…

人工智能与脑机接口:开启人机融合的新时代

人工智能与脑机接口&#xff1a;开启人机融合的新时代 随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;我们正与一个全新的时代相遇——人工智能与脑机接口相融合的时代。这个时代将带来前所未有的变革&#xff0c;让人类与机器的交互方式发生根本性的改变。…