如何用纯javascript让一个可拖拽的div在4个角上都可以调整大小？
要实现让一个可拖拽的div在4个角上都可以调整大小，可以通过纯JavaScript来实现。下面是一个实现的示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.draggable {
width: 200px;
height: 200px;
background-color: #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: move;
}
.resizable {
width: 10px;
height: 10px;
background-color: #000;
position: absolute;
cursor: nwse-resize;
}
.resizable-top-left {
top: -5px;
left: -5px;
}
.resizable-top-right {
top: -5px;
right: -5px;
}
.resizable-bottom-left {
bottom: -5px;
left: -5px;
}
.resizable-bottom-right {
bottom: -5px;
right: -5px;
}
</style>
</head>
<body>
<div class="draggable">
<div class="resizable resizable-top-left"></div>
<div class="resizable resizable-top-right"></div>
<div class="resizable resizable-bottom-left"></div>
<div class="resizable resizable-bottom-right"></div>
</div>
<script>
// 获取可拖拽的div元素
var draggableElement = document.querySelector('.draggable');
// 获取可调整大小的div元素
var resizableElements = document.querySelectorAll('.resizable');
var startX, startY, startWidth, startHeight;
// 鼠标按下事件处理函数
function mouseDown(event) {
startX = event.clientX;
startY = event.clientY;
startWidth = parseInt(window.getComputedStyle(draggableElement).width);
startHeight = parseInt(window.getComputedStyle(draggableElement).height);
document.addEventListener('mousemove', mouseMove);
document.addEventListener('mouseup', mouseUp);
}
// 鼠标移动事件处理函数
function mouseMove(event) {
var deltaX = event.clientX - startX;
var deltaY = event.clientY - startY;
// 调整大小
if (event.target.classList.contains('resizable')) {
var currentWidth = startWidth + deltaX;
var currentHeight = startHeight + deltaY;
draggableElement.style.width = currentWidth + 'px';
draggableElement.style.height = currentHeight + 'px';
}
// 拖拽移动
else {
var newX = draggableElement.offsetLeft + deltaX;
var newY = draggableElement.offsetTop + deltaY;
draggableElement.style.left = newX + 'px';
draggableElement.style.top = newY + 'px';
}
}
// 鼠标松开事件处理函数
function mouseUp() {
document.removeEventListener('mousemove', mouseMove);
document.removeEventListener('mouseup', mouseUp);
}
// 绑定鼠标按下事件
resizableElements.forEach(function(element) {
element.addEventListener('mousedown', mouseDown);
});
</script>
</body>
</html>这段代码创建了一个可拖拽的div，同时在div的四个角上添加了可调整大小的小块。通过鼠标按下、移动和松开事件的处理函数，实现了拖拽和调整大小的功能。
这个功能可以应用于各种需要用户自定义大小和位置的场景，比如网页布局设计、图形编辑器等。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算能力，满足不同规模业务的需求。
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。
- 腾讯云云数据库 MySQL 版：提供高性能、可扩展的关系型数据库服务。
- 腾讯云云函数（SCF）：无服务器的事件驱动型计算服务，帮助您更轻松地构建和管理应用程序。
- 腾讯云人工智能：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。
- 腾讯云物联网（IoT）：提供全面的物联网解决方案，帮助您连接和管理物联网设备。
- 腾讯云移动开发：提供移动应用开发的云端支持，包括移动推送、移动分析等。
- 腾讯云区块链服务（BCS）：提供一站式区块链解决方案，帮助您快速构建和部署区块链应用。
- 腾讯云视频处理：提供视频处理和分发的云端服务，包括转码、截图、水印等功能。
- 腾讯云音视频通信（TRTC）：提供实时音视频通信能力，支持多人音视频通话和互动直播等场景。
请注意，以上仅为示例产品，实际应根据具体需求选择适合的腾讯云产品。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
