vue写一个元素的拖拽效果,canvas元素的获取以及拖拽元素,echarts获取元素进行拖拽以及页面内修改宽高样式

最新推荐文章于 2024-08-29 15:10:00 发布
最新推荐文章于 2024-08-29 15:10:00 发布
阅读量2.2k 收藏 8
点赞数 7
分类专栏： Vue 文章标签： echarts vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42840755/article/details/123365597
版权

废话不多说,直接开始吧

首先我们先新建一个vue项目,这里我相信大家都知道怎么新建vue项目

这里我就直接上代码吧,

首先我先用canvas元素做示例吧

tuozhuai.vue

<template>
  <div>
    <button @click="getCanvas">点击生成折线图</button>
    <canvas
      @mousedown="move"
      @mouseout="suo"
      id="myCanvas"
      width="600"
      height="300"
      style="background: #afafaf; border: 1px solid #000; display: none"
      draggable="true"
    ></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      positionX: 0,//位置x
      positionY: 0,//位置y
    }
  },
  methods: {
    // canvas画布生成的图表
    getCanvas() {
      let c = document.getElementById("myCanvas")//获取当前元素的id,命名为c
      c.style.display = "block"//将获取到的元素显示出来
	  //这里是我画出来的canvas
      let ctx = c.getContext("2d")
      ctx.moveTo(30, 10)
      ctx.lineTo(30, 280)
      ctx.lineTo(560, 280)
      ctx.stroke()

      ctx.moveTo(30, 280)
      ctx.lineTo(80, 250)
      ctx.lineTo(130, 250)
      ctx.lineTo(180, 220)
      ctx.lineTo(230, 210)
      ctx.lineTo(280, 220)
      ctx.lineTo(330, 210)
      ctx.lineTo(380, 220)
      ctx.lineTo(430, 210)
      ctx.lineTo(530, 220)
      ctx.stroke()
    },
    // 拖拽事件
    move(e) {
      let odiv = e.target //获取目标元素

      //鼠标头相对元素的位置
      let disX = e.clientX - odiv.offsetLeft
      let disY = e.clientY - odiv.offsetTop
      document.onmousemove = (e) => {
        console.log(e)
        //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX
        let top = e.clientY - disY

        //绑定元素位置到positionX和positionY上面
        this.positionX = top
        this.positionY = left

        //移动当前的canvas元素
        odiv.style.left = left + "px"
        odiv.style.top = top + "px"
      }
      document.onmouseup = (e) => {
        document.onmousemove = null
        document.onmouseup = null
      }
    },
  },
  mounted() {
    // // 页面加载完毕后生成canvas图表
    // this.getCanvas()
  },
}
</script>

<style lang="scss" scoped>
#myCanvas {
  position: relative; /*定位*/
  border: 1px solid #aaaaaa;
}
</style>

效果如下视频

canvas元素拖拽效果

然后我再用echarts做出拖拽效果,并且可以修改宽高样式
先安装echarts图表

npm install echarts --save

Echarts_tuozhuai.vue

<template>
  <div>
    <div @click="canvas">折线图</div>
    <div @click="canvasShan">扇形图</div>
    <div @mousedown="move">
      <div
        id="main"
        :style="{ width: w + 'px', height: h + 'px' }"
        style="border: 1px solid #666; display: none; position: absolute"
      ></div>
    </div>
    <div @mousedown="movee">
      <div
        id="mainn"
        :style="{ width: ww + 'px', height: hh + 'px' }"
        style="border: 1px solid #666; display: none; position: absolute"
      ></div>
    </div>
    <div style="position: absolute; right: 0">
      <div>修改样式</div>
      <div>
        折线图:<br />
        宽:
        <input type="text" :value="w" @change="wChange" /><br />
        高: <input type="text" :value="h" @change="hChange" />
      </div>
      <div>
        扇形图:<br />
        宽:
        <input type="text" :value="ww" @change="wwChange" /><br />
        高:
        <input type="text" :value="hh" @change="hhChange" />
      </div>
    </div>
  </div>
</template>

<script>
// 导入echarts图表
import * as echarts from "echarts"
export default {
  data() {
    return {
      w: 400,
      h: 200,
      ww: 400,
      hh: 200,
    }
  },
  methods: {
    //修改折线图的宽
    wChange(e) {
      this.w = e.target.value
      let a = document.querySelector("#main>div>canvas")
      a.style.width = this.w + "px"
      console.log(a)
    },
    //修改折线图的高
    hChange(e) {
      this.h = e.target.value
      let a = document.querySelector("#main>div>canvas")
      a.style.height = this.h + "px"
    },
    //修改扇形图的宽
    wwChange(e) {
      this.ww = e.target.value
      let a = document.querySelector("#mainn>div>canvas")
      a.style.width = this.ww + "px"
      console.log(a)
    },
    //修改扇形图的高
    hhChange(e) {
      this.hh = e.target.value
      let a = document.querySelector("#mainn>div>canvas")
      a.style.height = this.hh + "px"
    },
    //绘制图表
    canvas() {
      var chartDom = document.getElementById("main")
      chartDom.style.display = "block"
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: {},
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {},
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "Email",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "Union Ads",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "Video Ads",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "Direct",
            type: "line",
            stack: "Total",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "Search Engine",
            type: "line",
            stack: "Total",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      }

      option && myChart.setOption(option)
    },
    canvasShan() {
      var chartDom = document.getElementById("mainn")
      chartDom.style.display = "block"
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      }

      option && myChart.setOption(option)
    },
    // 折线图拖拽
    move(e) {
      let odiv = document.getElementById("main")
      console.log(odiv)
      // let odiv = e.target //获取目标元素

      //鼠标头相对元素的位置
      let disX = e.clientX - odiv.offsetLeft
      let disY = e.clientY - odiv.offsetTop
      document.onmousemove = (e) => {
        console.log(e)
        //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX
        let top = e.clientY - disY

        //绑定元素位置到positionX和positionY上面
        this.positionX = top
        this.positionY = left

        //移动当前元素
        odiv.style.left = left + "px"
        odiv.style.top = top + "px"
      }
      document.onmouseup = (e) => {
        document.onmousemove = null
        document.onmouseup = null
      }
    },
    //扇形图拖拽
    movee(e) {
      let odiv = document.getElementById("mainn")
      console.log(odiv)
      // let odiv = e.target //获取目标元素

      //鼠标头相对元素的位置
      let disX = e.clientX - odiv.offsetLeft
      let disY = e.clientY - odiv.offsetTop
      document.onmousemove = (e) => {
        console.log(e)
        //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX
        let top = e.clientY - disY

        //绑定元素位置到positionX和positionY上面
        this.positionX = top
        this.positionY = left

        //移动当前元素
        odiv.style.left = left + "px"
        odiv.style.top = top + "px"
      }
      document.onmouseup = (e) => {
        document.onmousemove = null
        document.onmouseup = null
      }
    },
  },
  mounted() {
    // this.canvas()
  },
}
</script>

<style lang="scss" scoped></style>

效果图下视频所示

echarts获取元素拖拽效果,可修改元素宽高

由于我的偷懒,没有将代码进行封装简化处理,希望各位看了不要介意哈,嘿嘿~

你真的快乐吗
关注
专栏目录
vue之canvas元素拖动及改变形状
01-02
vue之canvas元素拖动及改变形状 vue之canvas元素拖动及改变形状
vue之canvas拖动元素
12-28
vue之canvas拖动元素 支持选中，置顶，支持以鼠标点前点拖动
vue 组件拖拽
最新发布
qq_38744614的博客
08-29 4085
vue 组件拖动，自定义属性
vue+canvas拖拽图形+按钮盒子跟随
qq_41281960的博客
04-12 1788
<template> <div class="main"> <canvas ref="myCanvas" id="myCanvas" width="500px" height="300px" style="background: black" @mousedown="canvasMouseDown" @mousemove="canvasMouseMove" ...
想实现Canvas元素拖拽？速来一探究竟，你也可以轻松做到！
qq_39222910的博客
03-25 2284
经过上面的事件监听和封装，自定义事件就比较简单了，只需要做到三件事即可，传递事件、绑定到元素上、触发即可。封装类说明初始化流程说明。
vue拖动实现布局，添加元素，拖拽元素，设置文本大小
11-17
在 Vue 组件内，你可以定义一个数据属性（如 `textSize`），并将其与元素的样式绑定。用户可以通过交互或输入框改变 `textSize` 值，从而改变文本的字体大小。使用 `v-bind:style` 或 `:style` 指令可以动态设置...
vue 流程图，拖拽创建 可以画箭头连接元素
01-09
在“vue 流程图，拖拽创建 可以画箭头连接元素”的项目中，我们看到开发者使用Vue来实现了一个交互式的流程图应用。这个应用允许用户通过拖拽方式创建流程图，并使用线条连接各个元素，这样的功能对于业务流程分析、...
【JavaScript】canvas实现可拖拽、修改的分段进度条
01-06
在JavaScript开发中，Canvas是一个非常重要的元素，它允许开发者在网页上进行动态图形绘制。本教程将探讨如何利用Canvas和JavaScript技术实现一个可拖拽、可修改的分段进度条，这在各种用户界面设计中非常实用。我们...
canvas+vue实现图片的缩放、拖拽
qq_33426324的博客
05-27 8771
最近做项目遇到一个需求，对图片进行拖动+缩放，本来这个功能直接采用viewerjs这个插件就可以实现的。 但是我们还有其他需求啊，在底层图片上添加一些图片或者文字注释，并且随着底层图片的拖动和缩放后，其相对位置不能发生改变，因此选择了用canvas解决，毕竟x,y坐标在那里，敌动我也动。 定义canvas，解决绘制图片模糊的问题 <template> <canvas ref="bargraphCanvas" :width="canvasWidth" :height="canvasHeigh
【canvas】在Vue3+ts中实现 canva内的矩形拖动操作。
qq_2511276124的博客
11-10 1026
canvas内的显示内容如何拖动？ 这里提供一个 canvas内矩形移动的解决思路。 这个canvas拖动如果封装好的话，感觉是很有用的。
手动拖动div改变窗口宽度大小 左中右三列拖拽
09-26
手动拖动div改变窗口宽度大小 左中右三列拖拽
vue 鼠标拖动画矩形_Vue使用鼠标在Canvas上绘制矩形
weixin_42502040的博客
12-31 840
本文实例为大家分享了Vue使用鼠标在Canvas上绘制矩形的具体代码，供大家参考，具体内容如下1.代码width="460" height="240" @mousedown="mousedown" @mouseup="mouseup" @mousemove="mousemove">export default {name:"hello-world",data() {return {flag:...
Vue+Echart，实现拖拽和自定义功能
aijinbo0796的博客
06-14 2024
公司前一段时间有需求，要实现echart组件化，实现自定义添加、删除、修改、拖拽等功能，于是就抽时间实现了下 利用vue+vuex+axiso+vuedraggable+elementui+mock实现,直接上图吧，代码在git，稍后会发地址 1、默认主页，不可拖拽 2、点击编辑，可进行图表的拖拽、删除、修改名称功能 3、点击添加，可以添加自定义图表，当然里面都是固定自己...
vue canvas绘制点、直线、矩形、圆、多边形；以及点击选中高亮；拖拽、放大缩小；明暗度调节
agua001的博客
12-13 4711
vue canvas绘制点、直线、矩形、圆、多边形；以及点击选中高亮；拖拽、放大缩小；明暗度调节
vue 使用 ref 获取组件内的元素 canvas
josiecici的博客
09-14 1912
组件注册写上ref=“qjt” <Psv :angle="angle" :url="url" v-if="psvShow" ref="qjt" :boolOne="psvReset"></Psv> 获取$el let canvas = this.$refs.qjt.$el.getElementsByTagName("canvas")[0];
canvas拖拽功能实现
m0_37573249的博客
01-07 3063
在默认状态下对图形的操作都是基于左上角为原点进行操作的，但在特定的场景下，我们希望改变原点的位置或者根据鼠标指针实时调整对图形的拖拽位置。这时就需要对原点进行相应的调整。例如我们要实现一个拖拽功能，根据鼠标点击图形上的任何一个位置对图形进行拖拽移动。 默认状态下，当我们点击图形并拖拽图形时会发现，在我们清空画布后对图形坐标进行重新绘制，发现鼠标指针的拖拽点往往始终偏移到图形的左上角原点位置为指针位置，那如何保持鼠标指针点击图形上的哪个位置就始终保持不变呢。那就涉及到鼠标按下到拖...
vue canvas 区域绘制有绘制多边形，包括拖拽、重置、撤销、判断线段重合、判断点是否在多边形内
qq_30687739的博客
12-01 2968
先上效果图（gif 图， 应该是可以看到的吧）对了，解释一下，我这个里面多排序的部分，是因为划线你肯定要有顺序，因为我从接口拿到的顺序是打乱的，所以我按照升序 整理了一下。现在绘制的下面之所以是白色的，是因为录gif的时候 我监控没打开，所以监控没显示出来，用图片也是可以的。我是一个白菜，里面还是有部分搞不太懂，建议可以看一下参考文献第一个链接，问问大佬，然后我就直接上代码了，我写了大量的注释，要是看不懂的，我再解释。
vue+echart实现3d地图可拖拽、缩放、区域填充颜色(geo3D)
_小郑有点困了的博客
03-17 2398
原理就是抬高了这个区域的高度，并且改变了颜色。一个略微比2d地图炫酷一些的3d地图，
vue拖拽移动canvas元素
08-20
接着，在vue-draggable插件的配置中，可以设置一个事件监听器，当拖拽结束时，更新canvas元素的位置信息。例如： <canvas :style="{top: canvasPosition.top + 'px', left: canvasPosition.left + 'px'}"></...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你真的快乐吗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值