vue中使用zrender实现页面元素拖拽

业务描述

这也算是一个比较经典的页面交互，长按鼠标，可以将页面上的一些dom元素拖拽到指定区域，生成指定图形
所用到的技术就是h5的draggable属性和canvas画布，而本文所用的zrender，是一个对canvas的常见操作进行了简单封装的库（ps:著名的echarts.js底层就是又基于zrender构建的）

准备工作

npm install zrender -S

代码

话不多说，直接上代码，一些坑我也会在后面指出
zrender可直接在组件中引入

// vue template层代码
<div id="myCanvas" ref="myCanvas" @drop="drop_handler" @dragover="dragover_handler" />

<el-submenu index="1">
        <template slot="title">
             <img src="@/assets/images/filter.png" width="14" height="14">
             <span>demo</span>
        </template>
        <el-menu-item-group>
             <el-menu-item index="1-1" draggable="true" @dragleave.native="dragleave_handler">要拖拽元素</el-menu-item>
             <el-menu-item index="1-2" >暂不需要拖拽元素</el-menu-item>
        </el-menu-item-group>
</el-submenu>

template层这里，我有用到element-ui的导航栏组件，实际工作中，换成自己想要拖拽的dom元素即可

• 先将要拖拽元素的draggable属性设为true
• 监听拖拽离开事件dragleave，注意因为是element-ui组件，要添加.native修饰, 否则不会触发，其他的一些事件比如dragstart、dragend的介绍等可以查看mdn官网文档
• id为myCanvas的div就是用来生成图形的区域，css要先设置好高度和宽度，被拖拽的目标为源对象，要拖拽到（元素放置）的区域是目标对象，这个myCanvas就是目标对象
• 关于源对象和目标对象，它们都有自己的专属事件监听，目标对象，因为是放置元素的区域，所以监听drop放置事件，还有dragover事件，注意：drop和dragover这两个事件一定要一起写上，不然drop放置事件无法触发

// vue script层代码
import zrender from 'zrender'
export default {
 data() {
   return {
      zr: {},
      group: {},
      rectText: ''
   }
 },
 mounted() {
    this.zrenderInit()
 },
 methods:{
    zrenderInit() {
      const dom = this.$refs.myCanvas
      this.zr = zrender.init(dom)
      this.group = new zrender.Group()
    },
    draw(x, y, text) {
      const option = {
        shape: {
          x: x,
          y: y,
          r: 10,
          width: 100,
          height: 30
        },
        style: {
          fill: 'transparent',
          stroke: '#f3a63b',
          lineWidth: 2,
          text: text,
          fontSize: '16',
        },
        hoverable: true,
        draggable: true,
      }
      const Rect = new zrender.Rect(option)
      this.group.add(Rect)
      this.zr.add(this.group)
    },
    dragleave_handler(ev) {
      ev.preventDefault()
      this.rectText = '拖拽元素1'
    },
    drop_handler(ev) {
      ev.preventDefault()
      this.draw(ev.offsetX, ev.offsetY, this.rectText)
    },
    dragover_handler(ev) {
      ev.preventDefault()
    }
  }
}

• zrenderInit方法做一些初始化的准备工作， draw方法里面，用zrender画了个圆角矩形，矩形*的文字是“拖拽元素1”
• drop_handler作为处理放置事件的方法，监听offsetX、offsetY这两个值的变化，然后作为参数传参，生成矩形的横纵坐标，就可以随着鼠标的拖拽灵活变化
• 各个handler处理事件，一定要先添加e.preventDefault,来阻止浏览器的默认行为，否则事件不会触发

本文地址：https://blog.csdn.net/weixin_41320468/article/details/107368719