拖拽内容，并“获取坐标”的实现——(VUE,HTML完整页面)

已于 2022-09-09 14:25:34 修改
阅读量1.7k 收藏
点赞数
文章标签： vue.js html javascript
于 2022-09-09 14:24:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51386142/article/details/126781881
版权

目 录

一、VUE页面

预备操作

具体操作

二、Html页面

无预备操作，可以直接复制

 三、备注可能出错的地方

结束

一、VUE页面

预备操作：

1、使用iview vue2组件写的表单

2、代码部分包含四个案例

具体操作：

<template>
  <div>
    <img ref="block" class="ewm drag" style="" @dragstart="dragstart1($event)" @dragend="dragend1($event)"
      draggable="true" src="http://abt.saasqv.abtpt.com/img/ewm.d44cb15b.jpg" alt="">
    <img class="pLogo drag"
      src="http://saasoss.abtpt.com/QD1001/Sys_Source/logo/2020-01-16/LOGO20200116141103926957.png" ref="logo"
      draggable="true" @dragstart="dragstart2($event)" @dragend="dragend2($event)" alt="">

    <div class="drag" ref="name1" draggable="true" @dragstart="dragstart3($event)" @dragend="dragend3($event)" alt="">
      业务员姓名</div>

    <div class="drag" ref="mobile" draggable="true" @dragstart="dragstart4($event)" @dragend="dragend4($event)" alt="">
      133********</div>



    <Form :model="formItem" :label-width="100">
      <formItem label="二维码位置X">
        <InputNumber :max="10" :min="1" v-model="formItem.abtComKjLibwPostConfig.qrcodeLeft">
        </InputNumber>
      </formItem>
      <formItem label="二维码位置Y:">
        <InputNumber :max="10" :min="1" v-model="formItem.abtComKjLibwPostConfig.qrcodeTop">
        </InputNumber>
      </formItem>
      <formItem label="公司logoX:">
        <InputNumber :max="10" :min="1" v-model="formItem.abtComKjLibwPostConfig.branchLeft">
        </InputNumber>
      </formItem>
      <formItem label="公司logoY:">
        <InputNumber :max="10" :min="1" v-model="formItem.abtComKjLibwPostConfig.branchTop">
        </InputNumber>
      </formItem>
      <formItem label="电话位置X:">
        <InputNumber :max="10" :min="1" v-model="formItem.abtComKjLibwPostConfig.mobileLeft">
        </InputNumber>
      </formItem>
      <formItem label="电话位置Y:">
        <InputNumber :max="10" :min="1" v-model="formItem.abtComKjLibwPostConfig.mobileTop">
        </InputNumber>
      </formItem>
    </Form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      x1: 1,
      y1: 1,
      a: '',
      b: '',
      x2: 2,
      y2: 2,
      x3: 2,
      y3: 2,
      x4: 2,
      y4: 2,
      originPosX: 1,
      originPosY: 1,
      originPosX2: 1,
      originPosY2: 1,
      originPosX3: 1,
      originPosY3: 1,
      originPosX4: 1,
      originPosY4: 1,
      formItem: {
        abtComKjLibwPostConfig: { //详细的具体参数
          id: 47,
          btagcode: "2",
          sno: "ZYHB20220403142922662143",
          nameLeft: 0,
          nameTop: 0,
          nameFontSize: 30,
          nameFontColor: "#080808",
          mobileLeft: 0,
          mobileTop: 0,
          mobileFontSize: 30,
          mobileFontColor: "#0D0C0C",
          branchLeft: 0,
          branchTop: 0,
          branchWidth: 200,
          qrcodeLeft: 0,
          qrcodeTop: 0,
          qrcodeWidth: 150,
          width: 750,
          height: 1334
        }
      }
    }
  },
  methods: {
    // 修改坐标之  二维码
    // 开始1
    dragstart1(e) {
      console.log('拖拽开始');
      this.originPosX = e.offsetX;                        //记录开始拖拽元素位置
      this.originPosY = e.offsetY;
      console.log('offsetX:', window.event.offsetX);
      console.log('offsetY:', window.event.offsetY);
      this.x1 = window.event.offsetX;                         //记录开始拖拽鼠标位置
      this.y1 = window.event.offsetY;
    },
    // 开始2
    dragstart2(e) {
      console.log('拖拽开始');
      this.originPosX2 = e.offsetX;                        //记录开始拖拽元素位置
      this.originPosY2 = e.offsetY;
      console.log('offsetX:', window.event.offsetX);
      console.log('offsetY:', window.event.offsetY);
      this.x2 = window.event.offsetX;                         //记录开始拖拽鼠标位置
      this.y2 = window.event.offsetY;
    },
    // 开始3
    dragstart3(e) {
      console.log('拖拽开始');
      this.originPosX3 = e.offsetX;                        //记录开始拖拽元素位置
      this.originPosY3 = e.offsetY;
      console.log('offsetX:', window.event.offsetX);
      console.log('offsetY:', window.event.offsetY);
      this.x3 = window.event.offsetX;                         //记录开始拖拽鼠标位置
      this.y3 = window.event.offsetY;
    },
    // 开始4
    dragstart4(e) {
      console.log('拖拽开始');
      this.originPosX4 = e.offsetX;                        //记录开始拖拽元素位置
      this.originPosY4 = e.offsetY;
      console.log('offsetX:', window.event.offsetX);
      console.log('offsetY:', window.event.offsetY);
      this.x4 = window.event.offsetX;                         //记录开始拖拽鼠标位置
      this.y4 = window.event.offsetY;
    },


    // // 结束1
    dragend1() {
      console.log('拖拽结束');
      console.log('offsetX:', window.event.offsetX);
      console.log('offsetY:', window.event.offsetY);
      this.formItem.abtComKjLibwPostConfig.qrcodeLeft = window.event.offsetX;                            //记录结束拖拽鼠标位置
      this.formItem.abtComKjLibwPostConfig.qrcodeTop = window.event.offsetY;
      this.$refs.block.style.left = this.originPosX + this.formItem.abtComKjLibwPostConfig.qrcodeLeft - this.x1 + 'px';            //元素最后位置为：元素开始位置+鼠标结束拖拽位置-鼠标开始拖拽位置(当然也别忘记加单位px)
      this.$refs.block.style.top = this.originPosY + this.formItem.abtComKjLibwPostConfig.qrcodeTop - this.y1 + 'px';
    },

    // 结束2
    dragend2() {
      console.log('拖拽结束');
      this.formItem.abtComKjLibwPostConfig.branchLeft = window.event.offsetX;                            //记录结束拖拽鼠标位置
      this.formItem.abtComKjLibwPostConfig.branchTop = window.event.offsetY;
      this.$refs.logo.style.left = this.originPosX2 + this.formItem.abtComKjLibwPostConfig.branchLeft - this.x2 + 'px';            //元素最后位置为：元素开始位置+鼠标结束拖拽位置-鼠标开始拖拽位置(当然也别忘记加单位px)
      this.$refs.logo.style.top = this.originPosY2 + this.formItem.abtComKjLibwPostConfig.branchTop - this.y2 + 'px';
    },


    // 结束3
    dragend3() {
      console.log('拖拽结束');
      this.formItem.abtComKjLibwPostConfig.nameLeft = window.event.offsetX;                            //记录结束拖拽鼠标位置
      this.formItem.abtComKjLibwPostConfig.nameTop = window.event.offsetY;
      this.$refs.name1.style.left = this.originPosX3 + this.formItem.abtComKjLibwPostConfig.nameLeft - this.x2 + 'px';            //元素最后位置为：元素开始位置+鼠标结束拖拽位置-鼠标开始拖拽位置(当然也别忘记加单位px)
      this.$refs.name1.style.top = this.originPosY3 + this.formItem.abtComKjLibwPostConfig.nameTop - this.y2 + 'px';
    },

    // 结束4
    dragend4() {
      console.log('拖拽结束');
      this.formItem.abtComKjLibwPostConfig.mobileLeft = window.event.offsetX;                            //记录结束拖拽鼠标位置
      this.formItem.abtComKjLibwPostConfig.mobileTop = window.event.offsetY;
      this.$refs.mobile.style.left = this.originPosX4 + this.formItem.abtComKjLibwPostConfig.mobileLeft - this.x2 + 'px';            //元素最后位置为：元素开始位置+鼠标结束拖拽位置-鼠标开始拖拽位置(当然也别忘记加单位px)
      this.$refs.mobile.style.top = this.originPosY4 + this.formItem.abtComKjLibwPostConfig.mobileTop - this.y2 + 'px';
    },


    keydown() {
      console.log('keydown');
    }
  }
}
</script>

<style>
.drag {
  width: 120px;
  height: 120px;
  position: relative;
}
</style>

二、Html页面[此页面有参考

链接：实现简单的元素拖拽_星空之迹的博客-CSDN博客_元素拖拽]

无预备操作，可以直接复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .drag{
            background-color: aquamarine;
            width: 100px;
            height: 100px;
            position:relative; 
        }
        .test{
            background-color: rgb(255, 14, 6);
            width: 100px;
            height: 100px;
            color:aquamarine;
        }
    </style>
</head>
<body>
    <div class="drag" 
    ondragstart="dragstart1()" 			
    ondragend="dragend1()"
    draggable="true"
    >拖拽</div> 
    //设置元素可拖拽，并监听开始结束拖拽事件
</body>
<script>
    let drag=document.getElementsByClassName('drag')[0];
    let x1,x2,y1,y2,originPosX,originPosY;
    let dragstart1=function(e){
        console.log('拖拽开始');
        console.log('drag.offsetLeft',drag.offsetLeft);  
        console.log('drag.offsetTop',drag.offsetTop);		//因为元素位置是以左上角来计算的，点击时一般不在左上角，所以要分开计算
        originPosX=drag.offsetLeft;                        //记录开始拖拽元素位置
        originPosY=drag.offsetTop;
         console.log('offsetX:',window.event.offsetX);  
         console.log('offsetY:',window.event.offsetY);
         x1=window.event.offsetX;                         //记录开始拖拽鼠标位置
         y1=window.event.offsetY;
    }
    let dragend1=function(){
        console.log('拖拽结束');
        console.log('offsetX:',window.event.offsetX);
        console.log('offsetY:',window.event.offsetY);
        x2=window.event.offsetX;                            //记录结束拖拽鼠标位置
        y2=window.event.offsetY;
        drag.style.left=originPosX+x2-x1+'px';            //元素最后位置为：元素开始位置+鼠标结束拖拽位置-鼠标开始拖拽位置(当然也别忘记加单位px)
        drag.style.top=originPosY+y2-y1+'px';				
    }
    keydown=function(){
        console.log('keydown');
    }
</script>
</html>

 三、备注可能出错的地方

使用时候只需要修改：x1,y1,originPosX1: 1,originPosY1: 1,以及表单绑定的v-model

display记得设置，要脱离标准流

结束

coding_小张
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
10-18
今天小编就为大家分享一篇vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
黑豹程序员-vue3获取拖动div后的坐标
长安紫薯的专栏
12-18 272
【代码】黑豹程序员-vue3获取拖动div后的坐标。
获取html div元素的位置 vue js tootip
qq_38946996的博客
12-10 1490
//获取元素的纵坐标（相对于窗口） function getTop(e) { console.log(e); // var offset = e.offsetTop - e.scrollTop; // if (e.offsetParent != null) offset += getTop(e.offsetParent); let Y = e.getBoundingClientRect().top + 75; return Y; } //获取元素的横坐标（相对于窗口）
获取元素绝对位置 position
04-01
NULL 博文链接：https://mutongwu.iteye.com/blog/1425322
在图片上绘制区域并获取坐标数据（VUE版）
leile_wkle的博客
02-01 3241
在图片上绘制区域并获取坐标数据
vue拖拽
xiao白的博客
05-09 387
js 代码 在methos // 模块拖拽事件 move(e) { let Module = e.target; //获取目标元素 let _this = this; //算出鼠标相对元素的位置 let disX = e.clientX - Module.offsetLeft; let disY = e.clientY - Mo...
前端经典——vue实现登录页面开屏广告+校验demo.rar
11-29
在本项目中，“前端经典——vue实现登录页面开屏广告+校验demo”是一个使用Vue.js框架构建的示例应用，旨在展示如何在前端开发中创建一个包含登录页面、开屏广告以及用户输入校验功能的应用。Vue.js是当前非常流行的...
Vue拖拽组件列表实现动态页面配置功能
10-16
总结来说，实现Vue拖拽组件列表动态页面配置功能的关键步骤包括： 1. 引入`vuedraggable`插件。 2. 使用`draggable`组件分别创建可拖动的组件列表。 3. 设置`list`属性，指定拖放的数据源，`group`属性指定拖放组。...
Vue实现远程获取路由与页面刷新导致404错误的解决
10-17
通过以上三个步骤，我们成功地实现了Vue应用中远程获取路由，并解决了页面刷新后可能出现的404错误。这种方式允许我们根据用户角色动态加载路由，同时保持了友好的URL格式。然而，需要注意的是，这种方法要求服务器...
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
10-16
主要介绍了vue.js实现数据库的JSON数据输出渲染到html页面功能,结合实例形式分析了vue.js针对本地json数据的读取、遍历输出相关操作技巧,需要的朋友可以参考下
vue实现在图片中画矩形框,并得到图片中的对角坐标，测试可用版本
07-28
在Vue.js框架中实现图像上绘制矩形框并获取对角坐标的功能，是常见的图像处理需求，例如在图像标注、对象检测等应用场景中。本文将详细介绍如何在Vue项目中完成这个任务。 首先，我们需要了解Vue的基本概念。Vue.js...
vue 获取当前div离边框距离_vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法...
weixin_39626369的博客
01-17 5548
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法this.$refs['通过设置ref获取到的dom元素'].getBoundingClientRect();//示例: 获取元素距离顶部的距离this.$refs.journalUpward.getBoundingClientRect().top以上这篇vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法就是小编...
vue 获取元素在浏览器的位置_JavaScript获取窗口位置和元素坐标（兼容版）
weixin_39978350的博客
12-19 4917
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果，这种时候我们经常会用到一些元素位置和尺寸的计算，浏览器兼容性问题也是不可忽略的一部分，要想写出预想效果的JavaScript代码，我们需要了解一些基本知识。(原文来自：博客园)基础概念为了方便理解，我们需要了解几个基础概念，每个HTML元素都有下列属性offsetWidthclientWidthscrollWidthoff...
vue+element-实时获取页面的xy坐标
红岸基地
03-25 4520
今天没事的时候自己写着玩想到一个以前喜欢用jQuery写的实时获取坐标的这样一个事情，今天用vue简单的实现一下，因为我的windows在公司，我的mac没有安装node，所以今天的例子是直接使用cdn引入vue来实现的，简单的看一下。 我用的hb写的vue，毕竟习惯了，我们今天要实现的是一个鼠标移动的时候可以实时拿到当前鼠标坐标的这样一个事情，大概呢就是这么一个东西： 下面看源码： H...
vue中的拖拽事件
weixin_59525879的博客
12-09 1292
【代码】vue中的拖拽事件。
vue js获取div位置
Tiny2017的博客
10-14 7233
this.$refs.mydiv.offsetTop
VUE3中获取transform移动过程中的div的当前坐标
最新发布
qq_45820271的博客
12-19 566
在vue3中通过点击获取到一个正在移动的div的坐标
使用draggable实现拖拽，并携带参数
qq_45758925的博客
03-15 1600
在上面的示例中，我们使用v-for指令将items数组中的每个元素渲染为一个可拖动的div元素，并在dragstart事件处理程序中设置要传递的数据类型和值。我们还在放置区域的div元素上设置了dragover和drop事件处理程序，以便在元素拖动到目标区域时触发，并在drop事件处理程序中获取传递的数据类型和值，并根据这些数据更新items数组，从而实现拖放和携带数据的功能。这样，当拖动元素被放置到目标区域时，它将被移动到该区域并从原位置删除，并且可以通过getData方法获取传递的数据。
vue2.0怎么渲染html,vue采坑之——vue里面渲染html 并添加样式
05-19
在Vue2.0中渲染HTML有两种方式：v-html指令和使用组件。 1. v-html指令 v-html指令可以将一个字符串解析成HTML并渲染到页面上。例如： ``` <template> <div> <p v-html="content"></p> </div> </template> <script> export default { data() { return { content: '<b>Hello World</b>' } } } </script> ``` 这会将`<b>Hello World</b>`以加粗的形式渲染到页面上。 但是需要注意的是，v-html指令会将传入的字符串当做HTML代码直接解析并渲染，因此可能会存在XSS攻击的风险。因此，应该确保渲染的内容是可信的，或者对内容进行过滤和转义。 2. 使用组件 在Vue2.0中，可以通过创建组件的方式来渲染HTML。例如： ``` <template> <div> <my-html :content="content"></my-html> </div> </template> <script> import MyHtml from './MyHtml.vue' export default { components: { MyHtml }, data() { return { content: '<b>Hello World</b>' } } } </script> ``` 这里创建了一个名为`MyHtml`的组件，并将要渲染的HTML代码通过`content`属性传递给组件。组件的实现如下： ``` <template> <div v-html="content"></div> </template> <script> export default { props: ['content'] } </script> ``` 这会将传入的HTML代码解析并渲染到页面上。需要注意的是，组件方式相对于v-html指令更安全，因为可以在组件内部对传入的HTML内容进行过滤和转义。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值