vue基于Echarts的拖拽数据可视化功能实现(2)

let tX = e.clientX - disX; let tY = e.clientY - disY; el.style.left = tX + 'px'; el.style.top = tY + 'px'；

说明：el为当前图表对象

由于本人封装了通用vue组件，详细拖拽方法代码如下：

      // 初始化可拖拽方法       initDrag(){        let el = this.$el;        el.onmousedown = (e)=>{             e.preventDefault();             e.target.style.cursor = 'move';              //鼠标按下，计算鼠标触点距离元素左侧和顶部的距离             let disX = e.clientX - el.offsetLeft;             let disY = e.clientY - el.offsetTop;             // console.log('22222',document);             document.onmousemove = function (e) {               //计算需要移动的距离               let tX = e.clientX - disX;               let tY = e.clientY - disY;               //移动当前元素               if (tX >= 0 && tX <= window.innerWidth - el.offsetWidth) {                 el.style.left = tX + 'px';               }                if (tY >= 0 && tY <= window.innerHeight - el.offsetHeight) {                 el.style.top = tY + 'px';               }              };             //鼠标松开时，注销鼠标事件，停止元素拖拽。             document.onmouseup = function (e) {                 document.onmousemove = null;                 document.onmouseup = null;                 e.target.style.cursor = 'default';             };        }      },

如果想看封装的组件，请查看github地址：github地址

拖动效果如下图：

缩放功能

此功能用到了上面提到的 offsetWidth、offsetHeight、offsetLeft、offsetTop、clientX，clientY。实现思路如下：

（1）先设置可缩放的四个拖拽方框

<div v-show="isResize && resizeFlag" ref="resizeDivTag" id="resizeDivTag">         <span class="br"></span>         <span class="bl"></span>         <span class="tr"></span>         <span class="tl"></span>      </div>

其中isResize 与 resizeFlag表示是否可缩放以及是否可拖拽

（2）为每个可可缩放方框设置缩放函数，请看注释