42 lines
1.3 KiB
JavaScript
42 lines
1.3 KiB
JavaScript
const draggable = document.getElementById('draggable');
|
|
const resizer = document.querySelector('.resizer');
|
|
|
|
let isDragging = false;
|
|
let isResizing = false;
|
|
let initialX, initialY, initialWidth, initialHeight;
|
|
|
|
// 拖动功能
|
|
draggable.addEventListener('mousedown', (e) => {
|
|
isDragging = true;
|
|
initialX = e.clientX - draggable.offsetLeft;
|
|
initialY = e.clientY - draggable.offsetTop;
|
|
});
|
|
|
|
document.addEventListener('mousemove', (e) => {
|
|
if (isDragging) {
|
|
const newX = e.clientX - initialX;
|
|
const newY = e.clientY - initialY;
|
|
draggable.style.left = `${newX}px`;
|
|
draggable.style.top = `${newY}px`;
|
|
}
|
|
|
|
if (isResizing) {
|
|
const newWidth = e.clientX - (draggable.offsetLeft + initialWidth);
|
|
const newHeight = e.clientY - (draggable.offsetTop + initialHeight);
|
|
draggable.style.width = `${newWidth}px`;
|
|
draggable.style.height = `${newHeight}px`;
|
|
}
|
|
});
|
|
|
|
document.addEventListener('mouseup', () => {
|
|
isDragging = false;
|
|
isResizing = false;
|
|
});
|
|
|
|
// 调整大小功能
|
|
resizer.addEventListener('mousedown', (e) => {
|
|
isResizing = true;
|
|
initialWidth = draggable.offsetWidth - (e.clientX - draggable.offsetLeft);
|
|
initialHeight = draggable.offsetHeight - (e.clientY - draggable.offsetTop);
|
|
});
|