谷歌+火狐浏览器——实现生成二维码并实现拖动——js技能提升

news2025/4/4 11:29:28

最新遇到的问题：前两个二维码拖动不了，只有第三个一维码生成后，才可以拖拽

【问题】：出现在都是绝对定位，但是没有指定z-index导致的。
解决办法：在方法中添加一个变量

 renderDrag(id) {
  var isDragging = false;
  var currentElement = null;
  this.zIndex++;
  $('#' + id).css({ 'z-index': this.zIndex });
 ...
}

前一段时间，同事写了一个关于【自定义标签】的功能，里面可以实现二维码+一维码的生成，并鼠标拖动到指定元素的任意位置。上周测试提出火狐浏览器会出现不兼容的情况。

今天来简单模拟一下具体的实现方法：

最终效果

谷歌浏览器：
在这里插入图片描述
火狐浏览器：
在这里插入图片描述

解决步骤1：引入script文件——jq+qrcode+jsbarcode+vue

由于用到的是vue2的cdn模式，则直接通过script引入文件即可。

等下我会把所有的文件，上传到资源库中，这样大家就可以直接下载到本地而不需要从网上加载了，提高加载速度，还可以预防网络不通导致加载失败的情况。

资源库下载地址：
https://download.csdn.net/download/yehaocheng520/89524003

解决步骤2：css部分

<style>
  #wrapId {
    display: flex;
  }
  #draggable {
    cursor: pointer;
  }
  #contentId {
    width: 500px;
    height: 500px;
    margin: 20px auto;
    border: 1px solid red;
  }
</style>

解决步骤3：html部分

<div id="wrapId">
  <div>
    <input v-model.trim="text" />
    <button @click="createQRCode">生成二维码</button>
    <input v-model.trim="text2" />
    <button @click="createQRCode2">生成二维码2</button>
    <input v-model.trim="text3" />
    <button @click="createQRCode3">生成一维码</button>
  </div>
  <div id="contentId">
    <div id="draggable" style="position: absolute"></div>
    <div id="draggable2" style="position: absolute"></div>
    <canvas id="draggable3" style="position: absolute"></canvas>
  </div>
</div>

解决步骤4：js部分

// 创建一个Vue实例
      new Vue({
        el: '#wrapId',
        data: {
          text: '',
          text2: '',
          text3: '',
        },
        methods: {
          createQRCode() {
            $('#draggable').html('');
            $('#draggable').qrcode({
              render: 'canvas', //有canvas和table两种样式
              width: 200,
              height: 200,
              foreground: '#C00',
              background: '#FFF',
              text: this.text,
            });
            this.renderDrag('draggable');
          },
          createQRCode2() {
            $('#draggable2').html('');
            $('#draggable2').qrcode({
              render: 'canvas', //有canvas和table两种样式
              width: 200,
              height: 200,
              foreground: '#C00',
              background: '#FFF',
              text: this.text2,
            });
            this.renderDrag('draggable2');
          },
          createQRCode3() {
            // $('#draggable3').html('').JsBarcode(this.text3);
            JsBarcode('#draggable3', this.text3, {
              format: 'CODE128', //选择要使用的条形码类型
              width: 3, //设置条之间的宽度
              height: 100, // 高度
              displayValue: true, // 是否在条形码下方显示文字
              textAlign: 'center', // 设置文本的水平对齐方式
              textPosition: 'bottom', // 设置文本的垂直位置
              textMargin: 5, // 设置条形码和文本之间的间距
              fontSize: 15, // 设置文本的大小
              lineColor: '#000000', //设置条和文本的颜色。
              margin: 0, // 设置条形码周围的空白边距
            });
            this.renderDrag('draggable3');
          },
          renderDrag(id) {
            var isDragging = false;
            var currentElement = null;
            $('#' + id).mousedown(function (e) {
              isDragging = true;
              currentElement = $(this);
              offsetX = e.clientX - currentElement.offset().left;
              offsetY = e.clientY - currentElement.offset().top;
            });
            $(document).mousemove(function (e) {
              if (isDragging) {
                let rect = document
                  .getElementById('contentId')
                  .getBoundingClientRect();
                let left =
                  e.clientX - offsetX < rect.left
                    ? rect.left
                    : e.clientX - offsetX + currentElement.width() > rect.right
                    ? rect.right - currentElement.width()
                    : e.clientX - offsetX;
                let top =
                  e.clientY - offsetY < rect.top
                    ? rect.top
                    : e.clientY - offsetY + currentElement.height() >
                      rect.bottom
                    ? rect.bottom - currentElement.height()
                    : e.clientY - offsetY;
                currentElement.css('left', left + 'px');
                currentElement.css('top', top + 'px');
                console.log(
                  'x',
                  e.clientX - offsetX,
                  'y',
                  e.clientY - offsetY,
                  rect
                );
              }
            });

            $(document).mouseup(function (e) {
              if (isDragging) {
                isDragging = false;
              }
            });
          },
        },
      });

完成！！！多多积累，多多收获！！！

【经过测试：并没有发现火狐浏览器与谷歌浏览器需要单独兼容处理的部分，有遇到再改好了。。。。】

最后附上完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.js"></script>
    <script src="./qrcode.js"></script>
    <script src="./jsBarcode.js"></script>
    <!-- 引入Vue.js CDN -->
    <script src="./vue.js"></script>
    <style>
      #wrapId {
        display: flex;
      }
      #draggable {
        cursor: pointer;
      }
      #contentId {
        width: 500px;
        height: 500px;
        margin: 20px auto;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="wrapId">
      <div>
        <input v-model.trim="text" />
        <button @click="createQRCode">生成二维码</button>
        <input v-model.trim="text2" />
        <button @click="createQRCode2">生成二维码2</button>
        <input v-model.trim="text3" />
        <button @click="createQRCode3">生成一维码</button>
      </div>
      <div id="contentId">
        <div id="draggable" style="position: absolute"></div>
        <div id="draggable2" style="position: absolute"></div>
        <canvas id="draggable3" style="position: absolute"></canvas>
      </div>
    </div>
    <script>
      // 创建一个Vue实例
      new Vue({
        el: '#wrapId',
        data: {
          text: '',
          text2: '',
          text3: '',
        },
        methods: {
          createQRCode() {
            $('#draggable').html('');
            $('#draggable').qrcode({
              render: 'canvas', //有canvas和table两种样式
              width: 200,
              height: 200,
              foreground: '#C00',
              background: '#FFF',
              text: this.text,
            });
            this.renderDrag('draggable');
          },
          createQRCode2() {
            $('#draggable2').html('');
            $('#draggable2').qrcode({
              render: 'canvas', //有canvas和table两种样式
              width: 200,
              height: 200,
              foreground: '#C00',
              background: '#FFF',
              text: this.text2,
            });
            this.renderDrag('draggable2');
          },
          createQRCode3() {
            // $('#draggable3').html('').JsBarcode(this.text3);
            JsBarcode('#draggable3', this.text3, {
              format: 'CODE128', //选择要使用的条形码类型
              width: 3, //设置条之间的宽度
              height: 100, // 高度
              displayValue: true, // 是否在条形码下方显示文字
              textAlign: 'center', // 设置文本的水平对齐方式
              textPosition: 'bottom', // 设置文本的垂直位置
              textMargin: 5, // 设置条形码和文本之间的间距
              fontSize: 15, // 设置文本的大小
              lineColor: '#000000', //设置条和文本的颜色。
              margin: 0, // 设置条形码周围的空白边距
            });
            this.renderDrag('draggable3');
          },
          renderDrag(id) {
            var isDragging = false;
            var currentElement = null;
            $('#' + id).mousedown(function (e) {
              isDragging = true;
              currentElement = $(this);
              offsetX = e.clientX - currentElement.offset().left;
              offsetY = e.clientY - currentElement.offset().top;
            });
            $(document).mousemove(function (e) {
              if (isDragging) {
                let rect = document
                  .getElementById('contentId')
                  .getBoundingClientRect();
                let left =
                  e.clientX - offsetX < rect.left
                    ? rect.left
                    : e.clientX - offsetX + currentElement.width() > rect.right
                    ? rect.right - currentElement.width()
                    : e.clientX - offsetX;
                let top =
                  e.clientY - offsetY < rect.top
                    ? rect.top
                    : e.clientY - offsetY + currentElement.height() >
                      rect.bottom
                    ? rect.bottom - currentElement.height()
                    : e.clientY - offsetY;
                currentElement.css('left', left + 'px');
                currentElement.css('top', top + 'px');
                console.log(
                  'x',
                  e.clientX - offsetX,
                  'y',
                  e.clientY - offsetY,
                  rect
                );
              }
            });

            $(document).mouseup(function (e) {
              if (isDragging) {
                isDragging = false;
              }
            });
          },
        },
      });
    </script>
  </body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

RDNet实战：使用RDNet实现图像分类任务（一）

RDNet实战：使用RDNet实现图像分类任务（一）

论文提出的模型主要基于对传统DenseNet架构的改进和复兴&#xff0c;通过一系列创新设计&#xff0c;旨在提升模型性能并优化其计算效率&#xff0c;提出了RDNet模型。该模型的主要特点和改进点&#xff1a; 1. 强调并优化连接操作&#xff08;Concatenation&#xff09; 论文…
阅读更多...
Java反射与Fastjson的危险反序列化

Java反射与Fastjson的危险反序列化

什么是Java反射&#xff1f; 在前文中&#xff0c;我们有一行代码 Computer macBookPro JSON.parseObject(preReceive,Computer.class); 这行代码是什么意思呢&#xff1f;看起来好像就是我们声明了一个名为 macBookPro 的 Computer 类&#xff0c;它由 fastjson 的 parseObje…
阅读更多...
【解决ERROR】usage:conda [-h][-V] command... conda:error:unrecognized arguments

【解决ERROR】usage:conda [-h][-V] command... conda:error:unrecognized arguments

解决方法 conda env create --file conda3_520_env_deepPath.yml
阅读更多...
拖地机检测液位的原理-管道液位传感器

拖地机检测液位的原理-管道液位传感器

在现代洗地机中&#xff0c;确保水箱液位充足是保证清洁效率和质量的关键之一。为了实现这一功能&#xff0c;洗地机通常配备了管道光电液位传感器&#xff0c;这种传感器利用先进的光学感应原理来准确检测水箱中的液位情况。 管道光电液位传感器的工作原理基于光学传感技术&a…
阅读更多...
新手教学系列——crontab 使用不当引发的服务器性能问题

新手教学系列——crontab 使用不当引发的服务器性能问题

起因及症状 最近，我们的一台服务器随着运行时间的增加，逐渐出现了压力过大的问题。具体表现为数据库连接数飙升至 4000+，Redis 频繁超时，系统报错文件打开数过多等。针对这些问题，我们逐一检查了数据库连接池、Redis 连接池以及系统的 ulimit 配置，但都未能找到问题的根…
阅读更多...
k8s中port，targetPort，nodePort，containerPort的区别

k8s中port，targetPort，nodePort，containerPort的区别

一、说明 在 Kubernetes 中&#xff0c;port、targetPort、nodePort 和 containerPort 是用于定义服务&#xff08;Service&#xff09;和容器之间网络通信的不同参数。 它们各自的作用和含义如下&#xff1a; 1. port 定义&#xff1a;这是服务对外暴露的端口号。作用&#x…
阅读更多...
eBPF实战教程五｜如何使用USDT探针定位MySQL异常访问(含源码)

eBPF实战教程五｜如何使用USDT探针定位MySQL异常访问(含源码)

前言 各位小伙伴们&#xff0c;非常感谢你们对我们eBPF专题系列文章的持续关注和热情支持&#xff01;在之前的文章中&#xff0c;我们深入探讨了如何手写一个uprobe探测用户态程序。许多热心的小伙伴给我们发私信表达了他们对eBPF技术在数据库领域应用的浓厚兴趣&#xff0c;…
阅读更多...
2024建博会|博联AI大模型全屋智能引领智能体验新纪元

2024建博会|博联AI大模型全屋智能引领智能体验新纪元

7月8日&#xff0c;2024中国建博会&#xff08;广州&#xff09;在广交会展馆及保利世贸博览馆盛大启幕。BroadLink博联智能携AI大模型全屋智能以及AI商业照明解决方案惊喜亮相&#xff0c;全方位展示AI大模型在智能家居领域的前沿应用成果。 本次建博会&#xff0c;博联智能带…
阅读更多...
《大语言模型的临床和外科应用：系统综述》

《大语言模型的临床和外科应用：系统综述》

这篇题为《大语言模型的临床和外科应用&#xff1a;系统综述》的文章对大语言模型&#xff08;LLM&#xff09;目前在临床和外科环境中的应用情况进行了全面评估。 大语言模型&#xff08;LLM&#xff09;是一种先进的人工智能系统&#xff0c;可以理解和生成类似人类的文本。…
阅读更多...
如何在不关闭防火墙的情况下，让两台设备ping通

如何在不关闭防火墙的情况下，让两台设备ping通

问题现象 如题&#xff0c;做虚拟机实验的时候&#xff0c;有一台linux系统的虚拟机配置的ip地址是192.168.172.181 物理主机的ip地址是192.168.172.1 此时物理主机可以ping通虚拟机 但是虚拟机不能ping通物理主机 此时我们可以想到&#xff0c;有可能是物理主机防火墙的原因。…
阅读更多...
S32V234平台开发(一)快速使用

S32V234平台开发(一)快速使用

快速使用 准备供电复位选择串口通信启动选择显示登陆系统 准备供电 s32v234可以使用两种电源供电 一种是左边电源端子&#xff0c;一种是右边电源适配器(12V 3A) 注意:不要同时使用两种电源同时供电 复位选择 Pressing POR RESET pulls active low EXT_POR signal on S32V2…
阅读更多...
基于蓝牙iBeacon定位技术的商场3D楼层导视软件功能详解与实施效益

基于蓝牙iBeacon定位技术的商场3D楼层导视软件功能详解与实施效益

在现代商场的繁华与复杂中&#xff0c;寻找目的地往往令人头疼。维小帮3D楼层导视软件以其创新技术&#xff0c;为顾客带来无缝、直观的跨楼层导航体验&#xff0c;让每一次商场消费都成为享受。 商场3D楼层导视软件功能服务 3D多楼层导视地图&#xff0c;商场布局一览无遗 …
阅读更多...
卷技术还是卷应用？李彦宏给出了明确答案

卷技术还是卷应用？李彦宏给出了明确答案

如何理解李彦宏说的“不要卷模型&#xff0c;要卷应用” 引言 7月4日&#xff0c;2024世界人工智能大会在上海世博中心召开。百度创始人兼CEO李彦宏在产业发展主论坛上呼吁&#xff1a;“大家不要卷模型&#xff0c;要卷应用&#xff01;”这句话引起了广泛讨论。李彦宏认为&a…
阅读更多...
安装nodejs | npm报错

安装nodejs | npm报错

nodejs安装步骤: 官网&#xff1a;https://nodejs.org/en/ 在官网下载nodejs: 双击下载下来的msi安装包&#xff0c;一直点next&#xff0c;我选的安装目录是默认的: 测试是否安装成功&#xff1a; 输入cmd打开命令提示符&#xff0c;输入node -v可以看到版本&#xff0c;说…
阅读更多...
ByteMD富文本编辑器的vue3配置

ByteMD富文本编辑器的vue3配置

Git地址&#xff1a;GitHub - bytedance/bytemd: ByteMD v1 repository 控制面板输入 npm install bytemd/vue-next 下载成功后在src/main.ts中引用 import "bytemd/dist/index.css";引入后保存&#xff0c;下面是一些插件&#xff0c;比如说我用到gmf和hightLight&…
阅读更多...
Spring Cloud 引入

Spring Cloud 引入

1.单体架构&#xff1a; 定义&#xff1a;所有的功能实现都打包成一个项目 带来的后果&#xff1a; ①后端服务器的压力越来越大&#xff0c;负载越来越高&#xff0c;甚至出现无法访问的情况 ②业务越来越复杂&#xff0c;为了满足用户的需求&#xff0c;单体应用也会越来越…
阅读更多...
linux使用chattr与lsattr设置文件/目录防串改

linux使用chattr与lsattr设置文件/目录防串改

背景 linux服务器下，防止某个文件/目录被串改（增删改），可以使用chattr与lsattr设置，这是一种保护机制，用于防止意外地修改或删除重要的文件内容。 chattr与lsattr使用 1.设置目录 图中/tmp/zhk，设置目录属性文件可能被设置为不可更改（immutable）或者只追加（append …
阅读更多...
STM32智能仓库管理系统教程

STM32智能仓库管理系统教程

目录 引言环境准备智能仓库管理系统基础代码实现&#xff1a;实现智能仓库管理系统 4.1 数据采集模块 4.2 数据处理与控制算法 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;仓库管理与优化问题解决方案与优化收尾与总结 1. 引言 智能仓库管理系统通…
阅读更多...
吴恩达机器学习作业ex8:K 异常检测和推荐系统(Python实现)详细注释

吴恩达机器学习作业ex8:K 异常检测和推荐系统(Python实现)详细注释

文章目录 1 异常检测1.1 高斯分布1.2 估计高斯参数1.3 选择阈值 ε1.4 高维数据集 2 推荐系统2.1 电影评分数据集2.2 协作过滤学习算法2.2.1 协同过滤成本函数2.2.2 梯度协同过滤2.2.3 Regularized cost function2.2.4 正则梯度 2.3 学习电影推荐2.3.1 推荐 后记 1 异常检测 在…
阅读更多...
绩效管理为什么难？

绩效管理为什么难？

几乎所有企业都知晓绩效管理的重要性&#xff0c;但许多企业陷入了把绩效考核当绩效管理的误区。绩效考核只是绩效管理过程中的一个环节&#xff0c;如果只重视“考核”这个环节&#xff0c;会极大限制员工个人和组织的成长。 绩效管理是一个动态过程&#xff0c;包括绩效目标设…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023