var targetDiv = document.getElementById(‘eagleMapContainer’);
//得到点击时该地图容器的宽高:
var targetDivHeight = targetDiv.offsetHeight;
var startX = e.clientX;
var startY = e.clientY;
var _this = this;
document.onmousemove = function (e) {
e.preventDefault();
//得到鼠标拖动的宽高距离:取绝对值
var distX = Math.abs(e.clientX - startX);
var distY = Math.abs(e.clientY - startY);
//往上方拖动:
if (e.clientY < startY) {
targetDiv.style.height = targetDivHeight + distY + ‘px’;
}
//往下方拖动:
if (e.clientX < startX && e.clientY > startY) {
targetDiv.style.height = (targetDivHeight - distY) + ‘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;
}
}
},
};
但是这个效果和我想要的不是很一样,所以得稍微改造了一下。
我想要效果是: 我有一个div,里面包含了很多小方块列表,因为超出设置了超出滚动,所以是在有滚动条的div上添加实现高度变化的拖拽。
接下来就是改造一下上边的demo,简单点,直接上代码:
在上边需要拖拽的div下面添加一个div,就是点到这个div开始实现拖拽功能。
需要根据拖拽实现高度变化的div设置一个id,假设为 “fuDiv”,然后编写方法。
// 拖拉
dragEagle(e) {
var targetDiv = document.getElementById(‘fuDiv’);
//得到点击时该地图容器的宽高:
var targetDivHeight = targetDiv.offsetHeight;
var startX = e.clientX;
var startY = e.clientY;
var _this = this;
document.onmousemove = function (e) {
最后
文章到这里就结束了,如果觉得对你有帮助可以点个赞哦
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
his;
document.onmousemove = function (e) {
最后
文章到这里就结束了,如果觉得对你有帮助可以点个赞哦
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-DckkvaFG-1714371508641)]