首先看效果，如圖，滑鼠懸浮在地圖的右上角小框中時，提示“拖動調整大小”，可以給小框加個好看的圖示。點選可以進行拖拽。

基於上一篇部落格：https://blog.csdn.net/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 可以設定其他方向箭頭。