自定义图表--随意拖拽拉伸功能的实现

随意拖拽、拉伸元素的功能是现在大热的自定义图表的重要组成功能，本文以最简单的视角搞懂随意拖拽、拉伸元素功能，完成这个功能需要先了解原生 drag && vue-ruler-tool && @smallwei/avue

demo在线体验地址：zhao-wenchao110.gitee.io/customdrag

一、了解HTML5原生拖拽 drag

1-1、了解拖拽事件的流程

其实拖拽功能的实现无非就是三个步骤：
选中元素 ---> 拖动元素 ---> 释放元素；

1-2、如何选中元素

HTML5中只需要将元素身上设置属性 draggable 为 true，那么就可以按住鼠标左键选中元素，进行拖放了，其中 draggable的属性可以设置几个值：

• true:允许拖动
• false：禁止拖动
• auto：跟随浏览器定义是否可以拖动

<div draggable="true"></div>
复制代码

1-3、拖动事件

针对对象	事件名称	说明
被拖动的元素	dragstart	在元素开始被拖动时候触发
	drag	在元素被拖动时反复触发
	dragend	在拖动操作完成时触发
目的地对象	dragenter	当被拖动元素进入目的地元素所占据的屏幕空间时触发
	dragover	当被拖动元素在目的地元素内时触发
	dragleave	当被拖动元素没有放下就离开目的地元素时触发

其中需要注意的是 dragenter && dragover两个事件，他们是拒绝接收所有被拖放的元素，所以在使用时需要 .preventDefault 阻止默认的事件冒泡。

1-4、释放

针对对象	事件名称	说明
目的地对象	drop	当被拖动元素在目的地元素里放下时触发，一般需要取消浏览器的默认行为。

二、了解标尺功能 vue-ruler-tool

 

使用后便会在上边和左边出现标尺，如上图所见；

2-1、安装

npm install --save vue-ruler-tool
复制代码

2-2、使用

<vue-ruler-tool
  v-model="dashboard.presetLine"
  class="vueRuler"
  :step-length="50"
  :parent="true"
  :position="'relative'"
  :is-scale-revise="true"
  :visible.sync="dashboard.presetLineVisible"
>
  <div></div>        
</vue-ruler-tool>

<script>
  i