网站设计师培训中心,百度竞价排名黑幕,沈阳网络科技公司排名,举报的网站是国外的域名和空间最新遇到的问题#xff1a;前两个二维码拖动不了#xff0c;只有第三个一维码生成后#xff0c;才可以拖拽
【问题】#xff1a;出现在都是绝对定位#xff0c;但是没有指定z-index导致的。 解决办法#xff1a;在方法中添加一个变量 renderDrag(id) {var isDragging f…最新遇到的问题前两个二维码拖动不了只有第三个一维码生成后才可以拖拽
【问题】出现在都是绝对定位但是没有指定z-index导致的。 解决办法在方法中添加一个变量 renderDrag(id) {var isDragging false;var currentElement null;this.zIndex;$(# id).css({ z-index: this.zIndex });...
}前一段时间同事写了一个关于【自定义标签】的功能里面可以实现二维码一维码的生成并鼠标拖动到指定元素的任意位置。上周测试提出火狐浏览器会出现不兼容的情况。 今天来简单模拟一下具体的实现方法
最终效果
谷歌浏览器 火狐浏览器
解决步骤1引入script文件——jqqrcodejsbarcodevue
由于用到的是vue2的cdn模式则直接通过script引入文件即可。
等下我会把所有的文件上传到资源库中这样大家就可以直接下载到本地而不需要从网上加载了提高加载速度还可以预防网络不通导致加载失败的情况。
资源库下载地址 https://download.csdn.net/download/yehaocheng520/89524003
解决步骤2css部分
style#wrapId {display: flex;}#draggable {cursor: pointer;}#contentId {width: 500px;height: 500px;margin: 20px auto;border: 1px solid red;}
/style解决步骤3html部分
div idwrapIddivinput v-model.trimtext /button clickcreateQRCode生成二维码/buttoninput v-model.trimtext2 /button clickcreateQRCode2生成二维码2/buttoninput v-model.trimtext3 /button clickcreateQRCode3生成一维码/button/divdiv idcontentIddiv iddraggable styleposition: absolute/divdiv iddraggable2 styleposition: absolute/divcanvas iddraggable3 styleposition: absolute/canvas/div
/div解决步骤4js部分
// 创建一个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 langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlescript src./jquery.js/scriptscript src./qrcode.js/scriptscript src./jsBarcode.js/script!-- 引入Vue.js CDN --script src./vue.js/scriptstyle#wrapId {display: flex;}#draggable {cursor: pointer;}#contentId {width: 500px;height: 500px;margin: 20px auto;border: 1px solid red;}/style/headbodydiv idwrapIddivinput v-model.trimtext /button clickcreateQRCode生成二维码/buttoninput v-model.trimtext2 /button clickcreateQRCode2生成二维码2/buttoninput v-model.trimtext3 /button clickcreateQRCode3生成一维码/button/divdiv idcontentIddiv iddraggable styleposition: absolute/divdiv iddraggable2 styleposition: absolute/divcanvas iddraggable3 styleposition: absolute/canvas/div/divscript// 创建一个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
