首先看效果,如图,鼠标悬浮在地图的右上角小框中时,提示“拖动调整大小”,可以给小框加个好看的图标。点击可以进行拖拽。
基于上一篇博客:https://cloud.tencent.com/developer/article/1383937 实现。
代码:
<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;.children0是通过鼠标点击的对象来获取要设置的对象的宽高。直接用document.getElementById 比较方便,即便元素的嵌入关系改变了,一样可以找到该对象。
注:拖拽箭头是利用鼠标拖动的地方是div的右上方,所以箭头是右上方向的箭头,即设置div的css中的属性为cursor: ne-resize;
参考http://www.w3school.com.cn/tiy/t.asp?f=csse_cursor 可以设置其他方向箭头。