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

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

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

代码：

<template>
     <div id="eagleMapContainer" title="">
            <div id="eagleMap">
                <l-map>
                    
                </l-map>
            </div>
            <div id="tz" @mousedown="dragEagle">
                <div title="拖动调整大小" id="move_tz"></div>
            </div>
       </div>
</template>

<script>

    export default {
        name: "eagleMap",
        components: {
            
        },

        data () {  /*定义data property的地方*/
            return {
               
            }
        },  /*end of data()*/

        methods: {
            dragEagle:function(e){
                var targetDiv= document.getElementById('eagleMapContainer'); //e.target.parentNode.parentNode;.children[0]

                //得到点击时该地图容器的宽高：
                var targetDivWidth=targetDiv.offsetWidth;
                var targetDivHeight=targetDiv.offsetHeight;

                var startX=e.clientX;
                var startY=e.clientY;

                var _this=this;

                document.onmousemove=function(e){
                    console.log('move');
                    e.preventDefault();
                    //得到鼠标拖动的宽高距离：取绝对值
                    var distX=Math.abs(e.clientX-startX);
                    var distY=Math.abs(e.clientY-startY);                  

                    //往右上方拖动：
                    if(e.clientX > startX && e.clientY < startY){
                        targetDiv.style.width=targetDivWidth+distX+'px';
                        targetDiv.style.height=targetDivHeight+distY+'px';
                    }
                    //往左下方拖动：
                    if (e.clientX < startX && e.clientY > startY) {
                        targetDiv.style.width=(targetDivWidth-distX)+'px';
                        targetDiv.style.height=(targetDivHeight-distY)+'px';
                    }

                    //设置最大最小范围：不能无限制缩放，影响体验
                    if(parseInt(targetDiv.style.width)>=300){
                        targetDiv.style.width=300+'px';
                    }
                    if(parseInt(targetDiv.style.width)<=150){
                        targetDiv.style.width=150+'px';
                    }

                    if(parseInt(targetDiv.style.height)>=300){
                        targetDiv.style.height=300+'px';
                    }
                    if(parseInt(targetDiv.style.height)<=150){
                        targetDiv.style.height=150+'px';
                    }
                }

                document.onmouseup=function(){
                    document.onmousemove=null;
                }
            }
        },
        mounted:function(){
            
        }
    };/* end of export */

    //拖动鹰眼：
    
    

</script>

<style scoped>
#eagleMapContainer{
    position: absolute; 
    left: 13%; 
    bottom: 10px; 
    z-index: 200; 
    overflow: hidden; 
    visibility: visible; 
    width: 200px; 
    height: 200px;
}
#eagleMap {
    width: 100%; 
    height: 100%; 
    top: 0px;      
    right: 0px;
    position: absolute;
    z-index: 1000;
}
#tz{
    position: absolute; 
    right: 1px; 
    top: 1px; 
    width: 28px; 
    height: 28px; 
    cursor: ne-resize; 
    z-index: 200001; 
    background-image: url("");

}
#tz:hover{
    background-color: #666;
    //background-image: "images/arrow.png";
}
#move_tz{
    position: absolute;
    right: 0px; 
    top: 0px; 
    width: 27px; 
    height: 20px; 
    cursor: ne-resize; 
    z-index: 100; 
    background-image: url(""); 
    background-position: 0px 0px;
}

</style>

主要是看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 可以设置其他方向箭头。