这也算是一个比较经典的页面交互,长按鼠标,可以将页面上的一些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元素即可
// 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()
}
}
}
本文地址:https://blog.csdn.net/weixin_41320468/article/details/107368719
如对本文有疑问, 点击进行留言回复!!
使用纯前端JavaScript实现Excel导入导出方法过程详解
微信小程序完美解决scroll-view高度自适应问题的方法
bootstrap-closable-tab可实现关闭的tab标签页插件
网友评论