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

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

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

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

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

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

最终效果

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

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

由于用到的是vue2cdn模式,则直接通过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.mzph.cn/pingmian/43309.shtml

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

相关文章

2024.7.9总结

今天真的要气炸了。本来想安装个pycharm学学python的&#xff0c;谁知&#xff0c;家里的电脑被姐夫搬走了&#xff0c;然后&#xff0c;在自己的笔记本下载安装出现特别多问题&#xff0c;主要是启动失败&#xff0c;不知道是不是之前删了一些不该删的文件。然后那个DLL错误修…

Python 3 AI 编程助手

Python 3 AI 编程助手 Python 3 是当前最流行的编程语言之一,特别是在人工智能(AI)领域。Python 3 的语法简洁明了,拥有丰富的库和框架,使其成为开发 AI 应用程序的首选语言。本文将介绍 Python 3 在 AI 编程中的关键特性、常用库以及如何使用 Python 3 构建 AI 应用程序…

Python CuPy库:GPU加速的科学计算

更多Python学习内容&#xff1a;ipengtao.com 在数据科学和机器学习领域&#xff0c;处理大规模数据集常常需要巨大的计算资源。Python的CuPy库通过提供一个类似NumPy但运行在NVIDIA GPU上的接口&#xff0c;大幅提升了数组操作的速度&#xff0c;使得复杂的数值计算变得更加高…

Three 圆柱坐标(Cylindrical)和 视锥体(Frustum)

圆柱坐标&#xff08;Cylindrical&#xff09; 圆柱坐标&#xff1a;一个点的cylindrical coordinates。英语&#xff1a;cylindrical coordinate system&#xff09;是一种三维坐标系统。它是二维极坐标系往 z-轴的延伸。添加的第三个坐标 &#x1d467; 专门用来表示 P 点离…

【C/C++】VSCode 插件支持

C/C基础 C/C&#xff08;包括C/C IntelliSense, debugging, and code browsing.&#xff09;C/C Theme&#xff1a;UI Themes for C/C extension.Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code llVM增强 CodeLLDB&#xff1a;这个插件就是安装llvm…

基于FPGA的图像边缘检测(OV5640)

一、简介 1.应用范围 边缘主要存在于图像中目标与目标之间&#xff0c;目标与背景之间&#xff0c;区域与区域之间。 边缘检测的目的就是找到图像中亮度变化剧烈的像素点构成的集合&#xff0c;表现出来往往是轮廓。如果图像中边缘能够精确的测量和定位&#xff0c;那么&…

GaussDB关键技术原理:高性能(四)

GaussDB关键技术原理&#xff1a;高性能&#xff08;三&#xff09;从查询重写RBO、物理优化CBO、分布式优化器、布式执行框架、轻量全局事务管理GTM-lite等五方面对高性能关键技术进行了解读&#xff0c;本篇将从USTORE存储引擎、计划缓存计划技术、数据分区与分区剪枝、列式存…

SQLServer设置端口

要在SQL Server中设置端口&#xff0c;您需要修改配置文件sqlserver.ini。请按照以下步骤操作&#xff1a; 找到SQL Server的安装目录。通常情况下&#xff0c;它位于C:\Program Files\Microsoft SQL Server\MSSQLxx.InstanceName&#xff0c;其中xx是SQL Server的版本号&#…

Redis 7.x 系列【19】管道

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 往返时间2. 管道技术3. 代码演示4. 其他批处理4.1 原生批处理命令4.2 事务4.3 脚本…

240708_昇思学习打卡-Day20-MindNLP ChatGLM-6B StreamChat

240708_昇思学习打卡-Day20-MindNLP ChatGLM-6B StreamChat 基于MindNLP和ChatGLM-6B实现一个聊天应用&#xff0c;本文进行简单记录。 环境配置 %%capture captured_output # 实验环境已经预装了mindspore2.2.14&#xff0c;如需更换mindspore版本&#xff0c;可更改下面mi…

ArkTs基础入门

ArkTs基础入门 文章目录 一、 (方舟开发框架)ArkUI介绍二、自定义组件三、组件事件及使用弹出框分割线Text文本TextInput文本输入框Image图片Column列Row行Button按钮 一、 (方舟开发框架)ArkUI介绍 方舟开发框架&#xff08;简称&#xff1a;ArkUI&#xff09;&#xff0c;是…

Java | Leetcode Java题解之第224题基本计算器

题目&#xff1a; 题解&#xff1a; class Solution {public int calculate(String s) {Deque<Integer> ops new LinkedList<Integer>();ops.push(1);int sign 1;int ret 0;int n s.length();int i 0;while (i < n) {if (s.charAt(i) ) {i;} else if (s…

实施OPC UA网关以加速设备与MES系统之间的连接

在现代工业自动化中&#xff0c;信息化和智能化已成为企业提升竞争力的关键因素&#xff0c;为了实现生产过程的自动化和管理的高效化&#xff0c;工业自动化系统&#xff08;如OPC UA&#xff09;与制造执行系统&#xff08;MES&#xff09;的集成变得尤为重要。OPC UA&#x…

Pycharm 出现sdk is not defined for run configuration解决办法

第一步&#xff1a;运行->编辑配置 第二部&#xff1a;重新选择一下脚本路径和Python解释器 第三步&#xff1a;保存。重新运行

WebKit简介及其神秘的工作流程

在信息时代的巨浪中&#xff0c;互联网已经深深地渗透到了我们生活的每一个角落。作为连接我们与这个庞大网络世界的桥梁&#xff0c;网页浏览器无疑成为了我们生活中不可或缺的一部分。而在这些浏览器的背后&#xff0c;往往隐藏着一些强大而神秘的引擎&#xff0c;它们为浏览…

Openresty+lua 定时函数 ngx.timer.every

ngx.timer.every 是 OpenResty 中的一个函数&#xff0c;用于创建定时器&#xff0c;以便定期执行某个函数或代码块。它的用法如下&#xff1a; local delay 5 -- 定时器间隔时间&#xff0c;单位为秒ngx.timer.every(delay, function(premature)-- 这里是定时执行的代码块i…

鸿蒙系统:未来智能生态的引领者

在当今这个日新月异的互联网领域&#xff0c;操作系统作为连接硬件与软件的桥梁&#xff0c;其重要性不言而喻。随着华为鸿蒙系统&#xff08;HarmonyOS&#xff09;的崛起&#xff0c;一场关于操作系统未来的讨论再次被推向高潮。 鸿蒙OS&#xff0c;华为的全新力作&#xff…

LLM生成nvidia-h100-tensor-core-hopper-whitepaper.pdf摘要

LLM生成nvidia-h100-tensor-core-hopper-whitepaper.pdf摘要 代码 LLM生成nvidia-h100-tensor-core-hopper-whitepaper.pdf摘要 代码 import pdfplumber import timedef split_text_to_chunks(text, max_chunk_size8192, delimiter####):"""将长文本分割成多块…

网络模型介绍

网络模型在网络领域中主要指的是用于描述计算机网络系统功能的各种框架&#xff0c;其中最具代表性的两种模型是OSI七层参考模型和TCP/IP四层参考模型。以下是对这两种网络模型的详细解析&#xff1a; 一、OSI七层参考模型 OSI&#xff08;Open System Interconnection&#…

Python变量·二

# 变量 : 可变的量 # 1. 作用是用来存储数据, 为了方便以后使用它做别的运算 # 2. 定义变量时,不需要固定类型(弱类型: 动态数据类型) # 定义一个变量: # 将10这个值 赋值 给变量a (a是我们自己取的变量名) a 10 # 重点掌握 print(a, type(a)) # 10 <class int>…