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

叶浩成520

已于 2024-07-08 16:55:59 修改

阅读量536

点赞数 3

分类专栏： javascript知识点 js必会知识点前端基础知识文章标签： javascript 前端 vue.js

于 2024-07-08 11:32:04 首次发布

本文链接：https://blog.csdn.net/yehaocheng520/article/details/140263691

版权

前端基础知识同时被 3 个专栏收录

322 篇文章 32 订阅

订阅专栏

js必会知识点

226 篇文章 23 订阅

订阅专栏

javascript知识点

194 篇文章 6 订阅

订阅专栏

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

【问题】：出现在都是绝对定位，但是没有指定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>