JavaScript 在vue页面下实现鼠标拖拽div改变其大小,适用于鹰眼地图,街景地图等。
时间:2022-06-17
本文章向大家介绍JavaScript 在vue页面下实现鼠标拖拽div改变其大小,适用于鹰眼地图,街景地图等。,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
首先看效果,如图,鼠标悬浮在地图的右上角小框中时,提示“拖动调整大小”,可以给小框加个好看的图标。点击可以进行拖拽。
基于上一篇博客: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 可以设置其他方向箭头。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- pyinstaller库打包程序报错解决方法
- 搭建Gitlab
- C# EmguCV图像处理实例
- VSCode配置Python环境指南
- 【Python】Python爬虫爬取中国天气网(一)
- C# semaphore的使用-2
- [打造自己的监控系统]使用Django批量监控Oracle Job运行情况
- C#多线程--信号量(Semaphore)
- zabbix微信报警设置
- C#中调用python
- Emgucv视频处理--进阶篇
- C#中Lambda表达式总结
- [打造自己的监控系统]使用Django批量监控Oracle长会话
- C# ref实例讲解
- [Oracle 故障处理]记一次undo表空间使用率99%的问题