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

vue实现拖拽元素;vuedraggable拖拽插件

效果图:在这里插入图片描述

中文文档

以下代码可直接复制使用

安装依赖

npm i -S vuedraggable

使用

<template><div class="container"><div>使用flex竖轴布局 <br>handle=".mover" 可拖拽的class类名 <br>filter=".forbid" 不可拖拽的class类名</div><vuedraggable handle=".mover" filter=".forbid" class="container"style="width: 700px; height: 600px; display: flex; flex-wrap: wrap;" v-model="list"><transition-group><div v-for="(item, index) in list" :key="index" class="item":style="{ width: '200px', height: item.height + 'px' }"><span class="mover" style="background-color: #1fff;padding: 0 5px;cursor: move;">+</span><div class="mover"><div style="background-color: #1fff;">点击可拖</div><div style="background-color: #fff000;" class="forbid">点击不可拖</div></div><p>{{ item.text }}</p></div></transition-group></vuedraggable></div>
</template><script>
import vuedraggable from "vuedraggable";
export default {components: { vuedraggable },props: {},data() {return {list: [{ text: 'Item 1', height: 200 },{ text: 'Item 2', height: 150 },{ text: 'Item 3', height: 200 },{ text: 'Item 4', height: 150 },{ text: 'Item 5', height: 250 },{ text: 'Item 6', height: 350 }],};},
}
</script><style>
.container {border: 1px solid #ddd;
}.container>span {height: inherit;display: flex;flex-direction: column;flex-wrap: wrap;
}.item {width: 200px;margin: 5px;border: 1px solid black;
}
</style>

相关文章:

vue实现拖拽元素;vuedraggable拖拽插件

效果图&#xff1a; 中文文档 以下代码可直接复制使用 安装依赖 npm i -S vuedraggable使用 <template><div class"container"><div>使用flex竖轴布局 <br>handle".mover" 可拖拽的class类名 <br>filter".forbid&qu…...

Javascript介绍

Javascript 定义&#xff1a;一门简单的浏览器可解析的语言 作用&#xff1a;与HTML相结合使用&#xff0c;使我们的网页变得更加酷炫 发展史&#xff1a; 1.1992年&#xff0c;Nombase公司开发出来&#xff0c;校验表单&#xff0c;起名c--&#xff0c;后来更名为&#…...

毕业答辩PPT:如何在短时间内高效准备?

提起PPT&#xff0c;大家的第一反应就是痛苦。经常接触PPT的学生党和打工人&#xff0c;光看到这3个字母&#xff0c;就已经开始头痛了&#xff1a; 1、PPT内容框架与文案挑战重重&#xff0c;任务艰巨&#xff0c;耗费大量精力。 2、PPT的排版技能要求高&#xff0c;并非易事…...

树结构与算法-杨辉三角形的两种实现

什么是杨辉三角形 本文旨在讨论普通杨辉三角形的两种实现方式&#xff1a;迭代法和递归法。我们不详细讲解杨辉三角形的数学问题&#xff0c;只研究其代码实现。 杨辉三角形大致如下图&#xff1a; 杨辉三角形的规律 通过对杨辉三角形的图形分析&#xff0c;我们可以看到这几点…...

【机器学习】智能创意工厂:机器学习驱动的AIGC,打造未来内容新生态

&#x1f680;时空传送门 &#x1f50d;机器学习在AIGC中的核心技术&#x1f4d5;深度学习&#x1f388;生成对抗网络&#xff08;GANs&#xff09; &#x1f680;机器学习在AIGC中的具体应用&#x1f340;图像生成与编辑⭐文本生成与对话系统&#x1f320;音频生成与语音合成 …...

Python - 一个恶意脚本

Python - 恶意脚本 使用此脚本或修改前请注意以下几点&#xff1a; 系统资源&#xff1a;大量模拟键盘和鼠标事件可能会占用大量系统资源&#xff0c;会导致其他应用程序运行缓慢或崩溃。 隐私和安全&#xff1a;如果此脚本在未经用户同意的情况下运行&#xff0c;它可能侵犯…...

SFNC —— 采集控制(四)

系列文章目录 SFNC —— 标准特征命名约定&#xff08;一&#xff09; SFNC —— 设备控制&#xff08;二&#xff09; SFNC —— 图像格式控制&#xff08;三&#xff09; SFNC —— 采集控制&#xff08;四&#xff09; 文章目录 系列文章目录5、采集控制&#xff08;Acquisi…...

AUTOSAR学习

文章目录 前言1. 什么是autosar&#xff1f;1.1 AP&#xff08;自适应平台autosar&#xff09;1.2 CP&#xff08;经典平台autosar)1.3 我的疑问 2. 为什么会有autosar3.autosar的架构3.1 CP的架构3.1.1 应用软件层3.1.2 运行时环境3.1.3 基础软件层 3.2 AP的架构 4. 参考资料 …...

区区微服务,何足挂齿?

背景 睿哥前天吩咐我去了解一下微服务&#xff0c;我本来想周末看的&#xff0c;结果周末没带电脑&#xff0c;所以只能周一看了。刚刚我就去慕课网看了相关的视频&#xff0c;然后写一篇文章总结一下。这篇文章算是基础理论版&#xff0c;等我之后进行更多的实践&#xff0c;…...

数据结构 ->反转链表

工作原理 初始化&#xff1a; cur 指向传入的节点 node&#xff0c;即链表的头节点。prv 初始化为 NULL&#xff0c;用于存储当前节点的前一个节点。 循环反转&#xff1a; 在 while 循环中&#xff0c;当 cur 不为空时执行循环体。保存当前节点的下一个节点&#xff1a;使用 t…...

Unity基础(一)unity的下载与安装

目录 一:下载与安装 1.官网下载地址 2.推荐直接下载UnityHub 3.选择编辑器版本(推荐长期支持版) 4.在UnityHub安装选择相应的模块 二:创建项目 简介: Unity 是一款广泛应用的跨平台游戏开发引擎。 它具有以下显著特点&#xff1a; 强大的跨平台能力&#xff1a;能将开发的游…...

TOP10!YashanDB斩获广东省优秀信创产品与解决方案双料荣誉

近日&#xff0c;2024广东软件风云榜结果出炉&#xff0c;表彰为广东软件产业和数字经济、新型工业化发展作出突出贡献的企业、企业家、优秀产品等。深算院崖山数据库系统 YashanDB荣获广东省“2024年优秀信息技术应用创新产品TOP10”和“2024年优秀信息技术应用创新行业应用解…...

基于深度学习网络的USB摄像头实时视频采集与手势检测识别matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 系统架构 4.2 GoogLeNet网络简介 4.3 手势检测 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 训练过程如下&#xff1a; 将摄像头对准手势&#xff0c;然后进行…...

有趣且重要的JS知识合集(22)树相关的算法

0、举例&#xff1a;树形结构原始数据 1、序列化树形结构 /*** 平铺序列化树形结构* param tree 树形结构* param result 转化后一维数组* returns Array<TreeNode>*/ export function flattenTree(tree, result []) {if (tree.length 0) {return result}for (const …...

使用 Let’s Encrypt 生成免费 SSL 证书

使用 Let’s Encrypt 生成证书是一个简单且免费的方式&#xff0c;可以通过 Certbot 工具来实现。以下是详细的步骤说明&#xff1a; 1. 安装 Certbot 根据你的操作系统&#xff0c;安装 Certbot。以下以 Ubuntu 为例&#xff1a; sudo apt update sudo apt install certbot…...

【电脑小白】装机从认识电脑部件开始

前言 在 B 站上刷到了一个很牛逼的电脑装机视频&#xff0c;很适合电脑小白学习&#xff0c;故用文本记录下。 推荐对组装台式电脑有兴趣的小伙伴都去看看这个视频&#xff1a; 原视频链接&#xff1a;【装机教程】全网最好的装机教程&#xff0c;没有之一_哔哩哔哩_bilibil…...

ssldump一键分析网络流量(KALI工具系列二十二)

目录 1、KALI LINUX 简介 2、ssldump工具简介 3、在KALI中使用ssldump 3.1 目标主机IP&#xff08;win&#xff09; 3.2 KALI的IP 4、操作示例 4.1 监听指定网卡 4.2 指定端口 4.3 特定主机 4.4 解码文件 4.5 显示对话摘要 4.6 显示加密数据&#xff08;需要私钥&…...

使用seq2seq架构实现英译法

seq2seq介绍 模型架构&#xff1a; Seq2Seq&#xff08;Sequence-to-Sequence&#xff09;模型是一种在自然语言处理&#xff08;NLP&#xff09;中广泛应用的架构&#xff0c;其核心思想是将一个序列作为输入&#xff0c;并输出另一个序列。这种模型特别适用于机器翻译、聊天…...

攻防演练“轻装上阵” | 亚信安全信舱ForCloud 打造全栈防护新策略

网络世界攻防实战中&#xff0c;攻击风险已经从代码到云横跨全栈技术点&#xff0c;你准备好了吗 云服务器&#xff0c;攻击众矢之的 2022年超过38万个Kubernetes API服务器暴露公网&#xff0c;成为攻击者目标。云服务器&#xff0c;尤其是开源设施&#xff0c;一直以来不仅是…...

在Android Studio中将某个文件移出Git版本管理

最新在整理代码时发现&#xff0c;local.properties文件开头有这么一段注释&#xff1a; ## This file must *NOT* be checked into Version Control Systems, # as it contains information specific to your local configuration. 大意是这个文件不要加入到版本管理中。 之…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

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 …...

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...

在RK3588上搭建ROS1环境:创建节点与数据可视化实战指南

在RK3588上搭建ROS1环境:创建节点与数据可视化实战指南 背景介绍完整操作步骤1. 创建Docker容器环境2. 验证GUI显示功能3. 安装ROS Noetic4. 配置环境变量5. 创建ROS节点(小球运动模拟)6. 配置RVIZ默认视图7. 创建启动脚本8. 运行可视化系统效果展示与交互技术解析ROS节点通…...

CppCon 2015 学习:REFLECTION TECHNIQUES IN C++

关于 Reflection&#xff08;反射&#xff09; 这个概念&#xff0c;总结一下&#xff1a; Reflection&#xff08;反射&#xff09;是什么&#xff1f; 反射是对类型的自我检查能力&#xff08;Introspection&#xff09; 可以查看类的成员变量、成员函数等信息。反射允许枚…...

GeoServer发布PostgreSQL图层后WFS查询无主键字段

在使用 GeoServer&#xff08;版本 2.22.2&#xff09; 发布 PostgreSQL&#xff08;PostGIS&#xff09;中的表为地图服务时&#xff0c;常常会遇到一个小问题&#xff1a; WFS 查询中&#xff0c;主键字段&#xff08;如 id&#xff09;莫名其妙地消失了&#xff01; 即使你在…...

C++中vector类型的介绍和使用

文章目录 一、vector 类型的简介1.1 基本介绍1.2 常见用法示例1.3 常见成员函数简表 二、vector 数据的插入2.1 push_back() —— 在尾部插入一个元素2.2 emplace_back() —— 在尾部“就地”构造对象2.3 insert() —— 在任意位置插入一个或多个元素2.4 emplace() —— 在任意…...