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

废话不多说,直接开始吧

首先我们先新建一个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获取元素拖拽效果,可修改元素宽高

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