JavaScript 在vue页面下实现鼠标拖拽div改变其大小，适用于鹰眼地图，街景地图等。

首先看效果，如图，鼠标悬浮在地图的右上角小框中时，提示“拖动调整大小”，可以给小框加个好看的图标。点击可以进行拖拽。

基于上一篇博客：https://blog.csdn.net/acoolgiser/article/details/84866426  实现。

代码：

主要是看dragEagle函数里的代码。

其中：e.target.parentNode.parentNode;.children[0]是通过鼠标点击的对象来获取要设置的对象的宽高。直接用document.getElementById 比较方便，即便元素的嵌入关系改变了，一样可以找到该对象。

 

注：拖拽箭头是利用鼠标拖动的地方是div的右上方，所以箭头是右上方向的箭头，即设置div的css中的属性为cursor: ne-resize;

参考http://www.w3school.com.cn/tiy/t.asp?f=csse_cursor 可以设置其他方向箭头。