要实现让一个可拖拽的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的四个角上添加了可调整大小的小块。通过鼠标按下、移动和松开事件的处理函数,实现了拖拽和调整大小的功能。
这个功能可以应用于各种需要用户自定义大小和位置的场景,比如网页布局设计、图形编辑器等。
腾讯云相关产品和产品介绍链接地址:
请注意,以上仅为示例产品,实际应根据具体需求选择适合的腾讯云产品。
领取专属 10元无门槛券
手把手带您无忧上云