vue 实现拖拽效果

实现方式:使用自定义指令可以实现多个面板拖拽互不影响

1.自定义指令 js

directives: {// 拖拽drag(el) {el.onmousedown = function (e) {let x = e.pageX - el.offsetLeftlet y = e.pageY - el.offsetTopdocument.onmousemove = function (e) {el.style.left = e.pageX - x + 'px'el.style.top = e.pageY - y + 'px'}//鼠标抬起事件document.onmouseup = function () {document.onmousemove = null}}}},

2.html

    // 想拖动那个标签就在那个标签上面绑定 自定义指令 v-drag<div class="box" v-drag><div>按住拖拽</div></div>

3.css

.box {height: 300px;width: 300px;background-color: #ccc;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);cursor: pointer;
}

 按住就可以随便拉

 

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

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

相关文章

【期末课程设计】学生成绩管理系统

因其独特&#xff0c;因其始终如一 文章目录 一、学生成绩管理系统介绍 二、学生成绩管理系统设计思路 三、源代码 1. test.c 2. Student Management System.c 3.Stu_System.c 4.Teacher.c 5.Student Management System.h 前言&#xff1a; 学生成绩管理系统含教师…

什么是Maven,Maven的概述及基本使用

MAVEN 一、Maven简介1.1、Maven概述1.2、Maven仓库1.3项目获取jar包过程 二、Maven使用2.1Maven安装配置2.1.1配置环境变量2.1.2配置本地仓库2.1.3配置阿里云私服 2.2Maven基本使用2.2.1Maven常用指令2.2.2Maven生命周期 总结 一、Maven简介 Apache Maven是一个项目管理和构建…

STM32 I2C OVR 错误

一、问题 STM32 I2C 用作从机时&#xff0c;开启如下中断并启用 callback 回调函数。 每一次复位后&#xff0c;从机都可以正常触发地址匹配中断ADDR&#xff0c;之后在该中断的回调函数中启用接收中断去收取数据时&#xff0c;却无法进入RXNE中断&#xff0c;而是触发了 OVR …

<C语言> 动态内存管理

1.动态内存函数 为什么存在动态内存分配&#xff1f; int main(){int num 10; //向栈空间申请4个字节int arr[10]; //向栈空间申请了40个字节return 0; }上述的开辟空间的方式有两个特点&#xff1a; 空间开辟大小是固定的。数组在申明的时候&#xff0c;必须指定数组的…

自然语言处理NLP介绍——NLP简介

目录 内容先进性说明内容大纲概要云服务器的使用 内容先进性说明 内容大纲概要 云服务器的使用

githack的安装步骤+一次错误体验

一.githack的安装步骤 1.要在Kali Linux上安装GitHack工具&#xff0c;您可以按照以下步骤操作&#xff1a; 打开终端并使用以下命令克隆GitHack存储库&#xff1a; git clone https://github.com/lijiejie/GitHack.git2.进入GitHack目录&#xff1a; cd GitHack3.安装依赖项…

一种分解多种信号模式非线性线性调频的方法研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

Elasticsearch

文章目录 分布式搜索引擎elasticsearch介绍elasticsearch作用ELK技术栈elasticsearch和lucene 倒排索引正向索引倒排索引正向和倒排比较 es的一些概念文档和字段索引和映射mysql与elasticsearch elasticsearch安装部署单点es部署kibana安装IK分词器扩展词词典停用词典 索引库操…

Go语言基础语法八万字详解,对小白友好

基本语法——变量var 变量的使用 什么是变量 变量是为存储特定类型的值而提供给内存位置的名称。在go中声明变量有多种语法。 所以变量的本质就是一小块内存&#xff0c;用于存储数据&#xff0c;在程序运行过程中数值可以改变 声明变量 var名称类型是声明单个变量的语法…

PaddleOCR #PP-OCR常见异常扫雷

异常一&#xff1a;ModuleNotFoundError: No module named ‘tools.infer’ 实验案例&#xff1a; PaddleOCR #使用PaddleOCR进行光学字符识别&#xff08;PP-OCR文本检测识别&#xff09; 参考代码&#xff1a; 图片文本检测实验时&#xff0c;运行代码出现异常&#xff1a;M…

【我们一起60天准备考研算法面试(大全)-第二十七天 27/60】【真分数】

专注 效率 记忆 预习 笔记 复习 做题 欢迎观看我的博客&#xff0c;如有问题交流&#xff0c;欢迎评论区留言&#xff0c;一定尽快回复&#xff01;&#xff08;大家可以去看我的专栏&#xff0c;是所有文章的目录&#xff09;   文章字体风格&#xff1a; 红色文字表示&#…

8.6 PowerBI系列之DAX函数专题-非日期类型的累计聚合

需求 需求1&#xff1a; 需求2&#xff1a; 实现 1.需求1实现&#xff1a; &#xff08;1&#xff09;在power query中添加列-添加索引列&#xff1b; &#xff08;2&#xff09;根据索引列进行累加计算。 度量值 累计聚合销售额 var current_pro_type selectedvalue(…

CHD6.2.1集群 Hive开启Iceberg

下载jar包 https://repo1.maven.org/maven2/org/apache/iceberg/iceberg-hive-runtime/1.0.0/iceberg-hive-runtime-1.0.0.jar 存放在/opt/cloudera/parcels/CDH/lib/hive/auxlib/ CDH集群修改hive配置 选择xml格式 粘贴即可 <property><name>iceberg.engine.hi…

华为认证HCIA-HCIP-HCIEdatacom题库解析+机构视频+实验

题库包含有2023年最新HCIA-datacom题库、HCIP-datacom题库&#xff0c;HCIE-datacom题库&#xff0c; 云计算HCIA&#xff0c;HCIP题库&#xff0c;云服务HCIA&#xff0c;HCIP题库&#xff0c;华为存储HCIP题库&#xff0c;华为安全HCIP题库 &#xff0c;学习笔记&#xff0c;…

MES管理系统中设备管理功能的原理是什么

制造执行系统MES是一种应用于制造工厂的实际操作系统&#xff0c;它通过实时监控和控制生产流程&#xff0c;为生产过程提供全面的管理和优化。在MES管理系统解决方案中&#xff0c;设备管理功能是非常重要的一部分&#xff0c;它可以实现设备实时监控、故障预警、维护保养等功…

【论文阅读】通过解缠绕表示学习提升领域泛化能力用于主题感知的作文评分

摘要 本文工作聚焦于从领域泛化的视角提升AES模型的泛化能力&#xff0c;在该情况下&#xff0c;目标主题的数据在训练时不能被获得。本文提出了一个主题感知的神经AES模型&#xff08;PANN&#xff09;来抽取用于作文评分的综合的表示&#xff0c;包括主题无关&#xff08;pr…

【打卡】Datawhale暑期实训ML赛事

文章目录 赛题描述任务要求数据集介绍评估指标 赛题分析基于LightGBM模型Baseline详解改进baseline早停法添加特征 赛题描述 赛事地址&#xff1a;科大讯飞锂离子电池生产参数调控及生产温度预测挑战赛 任务要求 初赛任务&#xff1a;初赛提供了电炉17个温区的实际生产数据&…

使用win10专业版自带远程桌面公司内网电脑

在现代社会中&#xff0c;各类电子硬件已经遍布我们身边&#xff0c;除了应用在个人娱乐场景的消费类电子产品外&#xff0c;各项工作也离不开电脑的帮助&#xff0c;特别是涉及到数据采集和储存的场景&#xff08;如安保监控、自动化流程等等&#xff09;&#xff0c;更是离不…

pytest自动化测试指定执行测试用例

1、在控制台执行 打开cmd,进入项目目录 指定执行某个模块 pytest testcases\Logistics\Platform\CarSource\test_CarSourceList.py 指定执行某个目录及其子目录的所有测试文件 pytest testcases\Logistics\Platform\CarSource 指定执行某个模块的某个类的某个测试用例 pyte…

音视频入门之音频采集、编码、播放

作者&#xff1a;花海blog 今天我们学习音频的采集、编码、生成文件、转码等操作&#xff0c;我们生成三种格式的文件格式&#xff0c;pcm、wav、aac 三种格式&#xff0c;并且我们用 AudioStack 来播放音频&#xff0c;最后我们播放这个音频。 使用 AudioRecord 实现录音生成…