如何从各个角度制作可调整大小的div

Question

我正在制作一个可拖动和可调整大小的div。可拖动工作正常。我希望div能够在点击位于所有角落的"resizer"后用移动鼠标更改宽度和高度。我想好了如何做右下"调整大小"，效果很好，但我做不到左下。有人知道怎么做吗？

window.addEventListener('mouseup', mouseUpDragElement, false);
document.getElementById("dragdiv").addEventListener('mousedown', mouseDownDragElement, false);
document.getElementById("dragdiv").addEventListener('mousedown', mouseDownResizeElement, false);
var elementdragTop;
var elementdragLeft;
function mouseDownDragElement(e) {
window.addEventListener("mousemove", myFunctionDragElement, true);
elementdragTop = e.clientX - document.getElementById("dragdiv").offsetLeft;
elementdragLeft = e.clientY - document.getElementById("dragdiv").offsetTop;
}
function mouseUpDragElement() {
window.removeEventListener("mousemove", myFunctionDragElement, true);
}
function myFunctionDragElement(e) {
var x = e.clientX;
var y = e.clientY;
document.getElementById("dragdiv").style.position = "absolute";
document.getElementById("dragdiv").style.left = (x - elementdragTop) + 'px';
document.getElementById("dragdiv").style.top = (y - elementdragLeft) + 'px';
}
function mouseDownResizeElement(e) {
var resizertopleft = document.createElement("DIV");
resizertopleft.id = "resizer-top-left";
document.getElementById("dragdiv").appendChild(resizertopleft);
var resizertopright = document.createElement("DIV");
resizertopright.id = "resizer-top-right";
document.getElementById("dragdiv").appendChild(resizertopright);
var resizerbottomleft = document.createElement("DIV");
resizerbottomleft.id = "resizer-bottom-left";
resizerbottomleft.addEventListener('mousedown', mouseDownResizeElementResizerBottomLeft, false);
document.getElementById("dragdiv").appendChild(resizerbottomleft);
var resizerbottomright = document.createElement("DIV");
resizerbottomright.id = "resizer-bottom-right";
resizerbottomright.addEventListener('mousedown', mouseDownResizeElementResizerBottomRight, false);
document.getElementById("dragdiv").appendChild(resizerbottomright);
}
function mouseUpResizeElement(e) {
document.getElementById("resizer-top-left").remove();
}
// BUTTON BOTTOM RIGHT
function mouseDownResizeElementResizerBottomRight() {
window.addEventListener("mousemove", mouseMoveResizeElementResizerBottomRight, true);
document.getElementById("dragdiv").addEventListener('mouseup', mouseUpResizeElementResizerBottomRight, true);
}
function mouseMoveResizeElementResizerBottomRight(e) {
document.getElementById("dragdiv").addEventListener('mouseup', mouseUpResizeElementResizerBottomRight, true);
window.removeEventListener("mousemove", myFunctionDragElement, true);
document.getElementById("dragdiv").style.width = e.pageX - document.getElementById("dragdiv").getBoundingClientRect().left + 'px';
document.getElementById("dragdiv").style.height = e.pageY - document.getElementById("dragdiv").getBoundingClientRect().top + 'px';
}
function mouseUpResizeElementResizerBottomRight() {
window.removeEventListener("mousemove", mouseMoveResizeElementResizerBottomRight, true);
}
// BUTTON BOTTOM LEFT ???  Here is the code that does not work
function mouseDownResizeElementResizerBottomLeft(e) {
window.addEventListener("mousemove", mouseMoveResizeElementResizerBottomLeft, true);
document.getElementById("dragdiv").addEventListener('mouseup', mouseUpResizeElementResizerBottomLeft, true);
originaldivwidth = document.getElementById("dragdiv").style.width;
originaldivleft = document.getElementById("dragdiv").getBoundingClientRect().left;
originaldivright = document.getElementById("dragdiv").getBoundingClientRect().right;
originalmousex = e.clientX;
}
function mouseMoveResizeElementResizerBottomLeft(e) {
document.getElementById("dragdiv").addEventListener('mouseup', mouseUpResizeElementResizerBottomLeft, true);
window.removeEventListener("mousemove", myFunctionDragElement, true);
var elementoriginalwidth = document.getElementById("dragdiv").style.width;
var elementoriginalleft = document.getElementById("dragdiv").getBoundingClientRect().left;
var mouseX = e.clientX;
document.getElementById("dragdiv").style.width = document.getElementById("dragdiv").style.width + (e.clientX - originalmousex) + 'px';
document.getElementById("dragdiv").style.left = e.clientX + (e.clientX - originalmousex) + 'px';
}
function mouseUpResizeElementResizerBottomLeft() {
window.removeEventListener("mousemove", mouseMoveResizeElementResizerBottomLeft, true);
}

#dragdiv {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
margin: 0px;
}
#resizer-top-left {
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
border: 3px solid #4286f4;
position: absolute;
left: -5px;
top: -5px;
cursor: nwse-resize;
}
#resizer-top-right {
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
border: 3px solid #4286f4;
position: absolute;
right: -5px;
top: -5px;
cursor: nesw-resize;
}
#resizer-bottom-left {
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
border: 3px solid #4286f4;
position: absolute;
left: -5px;
bottom: -5px;
cursor: nesw-resize;
}
#resizer-bottom-right {
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
border: 3px solid #4286f4;
position: absolute;
right: -5px;
bottom: -5px;
cursor: nwse-resize;
}

<div id="container">
<div id="dragdiv"></div>
</div>

Answer 1

谷歌搜索的一点点功能很有趣(：这是Hưng Nguy的一个有效解决方案ễnhttps://codepen.io/ZeroX-DG

HTML

<div class='resizable'>
<div class='resizers'>
<div class='resizer top-left'></div>
<div class='resizer top-right'></div>
<div class='resizer bottom-left'></div>
<div class='resizer bottom-right'></div>
</div>
</div>

CSS

body,
html {
background: black;
}
.resizable {
background: white;
width: 100px;
height: 100px;
position: absolute;
top: 100px;
left: 100px;
}
.resizable .resizers{
width: 100%;
height: 100%;
border: 3px solid #4286f4;
box-sizing: border-box;
}
.resizable .resizers .resizer{
width: 10px;
height: 10px;
border-radius: 50%; /*magic to turn square into circle*/
background: white;
border: 3px solid #4286f4;
position: absolute;
}
.resizable .resizers .resizer.top-left {
left: -5px;
top: -5px;
cursor: nwse-resize; /*resizer cursor*/
}
.resizable .resizers .resizer.top-right {
right: -5px;
top: -5px;
cursor: nesw-resize;
}
.resizable .resizers .resizer.bottom-left {
left: -5px;
bottom: -5px;
cursor: nesw-resize;
}
.resizable .resizers .resizer.bottom-right {
right: -5px;
bottom: -5px;
cursor: nwse-resize;
}

JS

function makeResizableDiv(div) {
const element = document.querySelector(div);
const resizers = document.querySelectorAll(div + ' .resizer')
const minimum_size = 20;
let original_width = 0;
let original_height = 0;
let original_x = 0;
let original_y = 0;
let original_mouse_x = 0;
let original_mouse_y = 0;
for (let i = 0;i < resizers.length; i++) {
const currentResizer = resizers[i];
currentResizer.addEventListener('mousedown', function(e) {
e.preventDefault()
original_width = parseFloat(getComputedStyle(element, null).getPropertyValue('width').replace('px', ''));
original_height = parseFloat(getComputedStyle(element, null).getPropertyValue('height').replace('px', ''));
original_x = element.getBoundingClientRect().left;
original_y = element.getBoundingClientRect().top;
original_mouse_x = e.pageX;
original_mouse_y = e.pageY;
window.addEventListener('mousemove', resize)
window.addEventListener('mouseup', stopResize)
})
function resize(e) {
if (currentResizer.classList.contains('bottom-right')) {
const width = original_width + (e.pageX - original_mouse_x);
const height = original_height + (e.pageY - original_mouse_y)
if (width > minimum_size) {
element.style.width = width + 'px'
}
if (height > minimum_size) {
element.style.height = height + 'px'
}
}
else if (currentResizer.classList.contains('bottom-left')) {
const height = original_height + (e.pageY - original_mouse_y)
const width = original_width - (e.pageX - original_mouse_x)
if (height > minimum_size) {
element.style.height = height + 'px'
}
if (width > minimum_size) {
element.style.width = width + 'px'
element.style.left = original_x + (e.pageX - original_mouse_x) + 'px'
}
}
else if (currentResizer.classList.contains('top-right')) {
const width = original_width + (e.pageX - original_mouse_x)
const height = original_height - (e.pageY - original_mouse_y)
if (width > minimum_size) {
element.style.width = width + 'px'
}
if (height > minimum_size) {
element.style.height = height + 'px'
element.style.top = original_y + (e.pageY - original_mouse_y) + 'px'
}
}
else {
const width = original_width - (e.pageX - original_mouse_x)
const height = original_height - (e.pageY - original_mouse_y)
if (width > minimum_size) {
element.style.width = width + 'px'
element.style.left = original_x + (e.pageX - original_mouse_x) + 'px'
}
if (height > minimum_size) {
element.style.height = height + 'px'
element.style.top = original_y + (e.pageY - original_mouse_y) + 'px'
}
}
}
function stopResize() {
window.removeEventListener('mousemove', resize)
}
}
}
makeResizableDiv('.resizable')

来源：https://codepen.io/ZeroX-DG/pen/vjdoYe

Answer 2

这是@bananaforscale答案的Vue3实现。尽管它可能不像原来那样顺利，但它仍然运行得相当好。你可以在这里找到香草Js的教程，在这里找到codePen演示。我希望这能帮助到别人。

const { onMounted, onUnmounted, ref } = Vue;
const App = {
setup() {
const resizableEl = ref(null);
const resizers = ref(null);
const minimum_size = 20;
let original_width = 0;
let original_height = 0;
let original_x = 0;
let original_y = 0;
let original_mouse_x = 0;
let original_mouse_y = 0;
function resize(e) {
if (e.target.classList.contains("bottom-right")) {
const width = original_width + (e.pageX - original_mouse_x);
const height = original_height + (e.pageY - original_mouse_y);
if (width > minimum_size) {
resizableEl.value.style.width = width + "px";
}
if (height > minimum_size) {
resizableEl.value.style.height = height + "px";
}
} else if (e.target.classList.contains("bottom-left")) {
const height = original_height + (e.pageY - original_mouse_y);
const width = original_width - (e.pageX - original_mouse_x);
if (height > minimum_size) {
resizableEl.value.style.height = height + "px";
}
if (width > minimum_size) {
resizableEl.value.style.width = width + "px";
resizableEl.value.style.left =
original_x + (e.pageX - original_mouse_x) + "px";
}
} else if (e.target.classList.contains("top-right")) {
const width = original_width + (e.pageX - original_mouse_x);
const height = original_height - (e.pageY - original_mouse_y);
if (width > minimum_size) {
resizableEl.value.style.width = width + "px";
}
if (height > minimum_size) {
resizableEl.value.style.height = height + "px";
resizableEl.value.style.top =
original_y + (e.pageY - original_mouse_y) + "px";
}
} else {
const width = original_width - (e.pageX - original_mouse_x);
const height = original_height - (e.pageY - original_mouse_y);
if (width > minimum_size) {
resizableEl.value.style.width = width + "px";
resizableEl.value.style.left =
original_x + (e.pageX - original_mouse_x) + "px";
}
if (height > minimum_size) {
resizableEl.value.style.height = height + "px";
resizableEl.value.style.top =
original_y + (e.pageY - original_mouse_y) + "px";
}
}
}
function stopResize() {
window.removeEventListener("mousemove", resize);
}
onMounted(() => {
resizers.value = resizableEl.value.querySelectorAll(".resizer");
for (let i = 0; i < resizers.value.length; i++) {
const currentResizer = resizers.value[i];
currentResizer.addEventListener("mousedown", (e) => {
e.preventDefault();
original_width = parseFloat(
getComputedStyle(resizableEl.value, null)
.getPropertyValue("width")
.replace("px", "")
);
original_height = parseFloat(
getComputedStyle(resizableEl.value, null)
.getPropertyValue("height")
.replace("px", "")
);
original_x = resizableEl.value.getBoundingClientRect().left;
original_y = resizableEl.value.getBoundingClientRect().top;
original_mouse_x = e.pageX;
original_mouse_y = e.pageY;
window.addEventListener("mousemove", resize);
window.addEventListener("mouseup", stopResize);
});
}
});
onUnmounted(() => {
for (let i = 0; i < resizers.value.length; i++) {
const currentResizer = resizers.value[i];
currentResizer.removeEventListener("mousemove", resize);
currentResizer.removeEventListener("mouseup", stopResize);
}
});
return { resizableEl, resize };
},
};
Vue.createApp(App).mount("#app");

.resizable {
background: white;
width: 100px;
height: 100px;
position: absolute;
top: 100px;
left: 100px;
}
.resizable .resizers {
width: 100%;
height: 100%;
border: 3px solid #4286f4;
box-sizing: border-box;
}
.resizable .resizers .resizer {
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
border: 3px solid #4286f4;
position: absolute;
}
.resizable .resizers .resizer.top-left {
left: -5px;
top: -5px;
cursor: nwse-resize; /*resizer cursor*/
}
.resizable .resizers .resizer.top-right {
right: -5px;
top: -5px;
cursor: nesw-resize;
}
.resizable .resizers .resizer.bottom-left {
left: -5px;
bottom: -5px;
cursor: nesw-resize;
}
.resizable .resizers .resizer.bottom-right {
right: -5px;
bottom: -5px;
cursor: nwse-resize;
}

<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
<div id="app">
<div class="resizable" ref='resizableEl' @mousedown='resize'>
<div class="resizers">
<div class="resizer top-left"></div>
<div class="resizer top-right"></div>
<div class="resizer bottom-left"></div>
<div class="resizer bottom-right"></div>
</div>  
</div>
</div>