[英]How to make resizable div, resizable from sides?
我有来自 codepen 的这段代码,它制作了一个可调整大小的 div,可以从角落调整大小:
<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>
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;
}
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')
我如何使它从侧面调整大小? 它应该在右侧、左侧、底部、右侧和顶部的中间有一个圆圈,并从那里调整大小。 这是原始笔的链接: Medium: Making a resizable div
可能需要四个新的 ifs 和四个新的 css 类,但我不确定。
我调整了定位和类标题以将手柄放在两侧,然后从每个允许调整两个方向的脚本中删除。
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('right')) { const width = original_width + (e.pageX - original_mouse_x); if (width > minimum_size) { element.style.width = width + 'px' } } else if (currentResizer.classList.contains('left')) { const width = original_width - (e.pageX - original_mouse_x) 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')) { const height = original_height - (e.pageY - original_mouse_y) if (height > minimum_size) { element.style.height = height + 'px' element.style.top = original_y + (e.pageY - original_mouse_y) + 'px' } } else if (currentResizer.classList.contains('bottom')) { const height = original_height + (e.pageY - original_mouse_y) if (height > minimum_size) { element.style.height = height + 'px' } } } function stopResize() { window.removeEventListener('mousemove', resize) } } } makeResizableDiv('.resizable')
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; } .resizer.top { left: 50%; top: -5px; cursor: ns-resize; transform: translate(-7px, 0px); } .resizer.right { right: -5px; bottom: 50%; cursor: ew-resize; transform: translate(0px, 5px); } .resizer.bottom { left: 50%; bottom: -5px; cursor: ns-resize; transform: translate(-7px, 0px); } .resizer.left { left: -5px; bottom: 50%; cursor: ew-resize; transform: translate(0px, 5px); }
<div class='resizable'> <div class='resizers'> <div class='resizer top'></div> <div class='resizer right'></div> <div class='resizer bottom'></div> <div class='resizer left'></div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.