如何使用纯JavaScript使HTML元素可调整大小？
mon*_*onk 58 html javascript css dom-events
我想知道如何在使用纯JavaScript而不是jQuery库或任何其他库单击时使HTML元素<div>或<p>标记元素可调整大小.
use*_*621 90
我真的建议使用某种类型的库,但是你要求它,你得到它:
var p = document.querySelector('p'); // element to make resizable
p.addEventListener('click', function init() {
p.removeEventListener('click', init, false);
p.className = p.className + ' resizable';
var resizer = document.createElement('div');
resizer.className = 'resizer';
p.appendChild(resizer);
resizer.addEventListener('mousedown', initDrag, false);
}, false);
var startX, startY, startWidth, startHeight;
function initDrag(e) {
startX = e.clientX;
startY = e.clientY;
startWidth = parseInt(document.defaultView.getComputedStyle(p).width, 10);
startHeight = parseInt(document.defaultView.getComputedStyle(p).height, 10);
document.documentElement.addEventListener('mousemove', doDrag, false);
document.documentElement.addEventListener('mouseup', stopDrag, false);
}
function doDrag(e) {
p.style.width = (startWidth + e.clientX - startX) + 'px';
p.style.height = (startHeight + e.clientY - startY) + 'px';
}
function stopDrag(e) {
document.documentElement.removeEventListener('mousemove', doDrag, false);
document.documentElement.removeEventListener('mouseup', stopDrag, false);
}
请记住,这可能无法在所有浏览器中运行(仅在Firefox中测试,绝对不能在IE <9中运行).
- +1我知道它是低级别的,但是当你因任何原因无法使用第三方库时它非常有用.我在Chrome,Firefox,Opera和Safari上测试过它. (4认同)
- 你实际上不会在生产中使用它，是吗？上面的代码显然是一个快速的破解，还有其他几个问题。这只是为了展示事物在低层次上是如何运作的。 (3认同)
- 我修复了jsfiddle。这应该起作用并达到相同的效果。http://jsfiddle.net/MissoulaLorenzo/gfn6ob3j/ (3认同)
- 我在脚本中发现了一个错误，如果您尝试在存在多个 p 标签元素时调整多个 p 标签元素的大小，那么代码将无法工作，是否有任何解决方案？ (2认同)
- 通过适当的处理和验证规则，该原理可以在生产中使用。我在 Angular 应用程序上使用类似的东西，但我无法使用 jQuery 来解决性能问题。 (2认同)
小智 59
纯css3解决方案怎么样？
div {
resize: both;
overflow: auto;
}
- 我认为重要的是要提到:使用css`resize` Webkit浏览器不会让你调整元素大小以使其更小,只是更大(在两个维度中). (7认同)
- 我在Chrome 53中试过它,它适用于缩小和拉伸. (4认同)
- 不幸的是,IE不支持CSS调整大小 (3认同)
小智 21
很简单:
示例:https://jsfiddle.net/RainStudios/mw786v1w/
var element = document.getElementById('element');
//create box in bottom-left
var resizer = document.createElement('div');
resizer.style.width = '10px';
resizer.style.height = '10px';
resizer.style.background = 'red';
resizer.style.position = 'absolute';
resizer.style.right = 0;
resizer.style.bottom = 0;
resizer.style.cursor = 'se-resize';
//Append Child to Element
element.appendChild(resizer);
//box function onmousemove
resizer.addEventListener('mousedown', initResize, false);
//Window funtion mousemove & mouseup
function initResize(e) {
window.addEventListener('mousemove', Resize, false);
window.addEventListener('mouseup', stopResize, false);
}
//resize the element
function Resize(e) {
element.style.width = (e.clientX - element.offsetLeft) + 'px';
element.style.height = (e.clientY - element.offsetTop) + 'px';
}
//on mouseup remove windows functions mousemove & mouseup
function stopResize(e) {
window.removeEventListener('mousemove', Resize, false);
window.removeEventListener('mouseup', stopResize, false);
}
- 很棒的解决方案！经测试适用于 Firefox56、Chrome61、Opera48 和 IE11。 (3认同)
And*_*rej 13
请参阅我的跨浏览器兼容的缩放器.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>resizer</title>
<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://rawgit.com/anhr/resizer/master/Common.js"></script>
<script type="text/javascript" src="https://rawgit.com/anhr/resizer/master/resizer.js"></script>
<style>
.element {
border: 1px solid #999999;
border-radius: 4px;
margin: 5px;
padding: 5px;
}
</style>
<script type="text/javascript">
function onresize() {
var element1 = document.getElementById("element1");
var element2 = document.getElementById("element2");
var element3 = document.getElementById("element3");
var ResizerY = document.getElementById("resizerY");
ResizerY.style.top = element3.offsetTop - 15 + "px";
var topElements = document.getElementById("topElements");
topElements.style.height = ResizerY.offsetTop - 20 + "px";
var height = topElements.clientHeight - 32;
if (height < 0)
height = 0;
height += 'px';
element1.style.height = height;
element2.style.height = height;
}
function resizeX(x) {
//consoleLog("mousemove(X = " + e.pageX + ")");
var element2 = document.getElementById("element2");
element2.style.width =
element2.parentElement.clientWidth
+ document.getElementById('rezizeArea').offsetLeft
- x
+ 'px';
}
function resizeY(y) {
//consoleLog("mousemove(Y = " + e.pageY + ")");
var element3 = document.getElementById("element3");
var height =
element3.parentElement.clientHeight
+ document.getElementById('rezizeArea').offsetTop
- y
;
//consoleLog("mousemove(Y = " + e.pageY + ") height = " + height + " element3.parentElement.clientHeight = " + element3.parentElement.clientHeight);
if ((height + 100) > element3.parentElement.clientHeight)
return;//Limit of the height of the elemtnt 3
element3.style.height = height + 'px';
onresize();
}
var emailSubject = "Resizer example error";
</script>
</head>
<body>
<div id='Message'></div>
<h1>Resizer</h1>
<p>Please see example of resizing of the HTML element by mouse dragging.</p>
<ul>
<li>Drag the red rectangle if you want to change the width of the Element 1 and Element 2</li>
<li>Drag the green rectangle if you want to change the height of the Element 1 Element 2 and Element 3</li>
<li>Drag the small blue square at the left bottom of the Element 2, if you want to resize of the Element 1 Element 2 and Element 3</li>
</ul>
<div id="rezizeArea" style="width:1000px; height:250px; overflow:auto; position: relative;" class="element">
<div id="topElements" class="element" style="overflow:auto; position:absolute; left: 0; top: 0; right:0;">
<div id="element2" class="element" style="width: 30%; height:10px; float: right; position: relative;">
Element 2
<div id="resizerXY" style="width: 10px; height: 10px; background: blue; position:absolute; left: 0; bottom: 0;"></div>
<script type="text/javascript">
resizerXY("resizerXY", function (e) {
resizeX(e.pageX + 10);
resizeY(e.pageY + 50);
});
</script>
</div>
<div id="resizerX" style="width: 10px; height:100%; background: red; float: right;"></div>
<script type="text/javascript">
resizerX("resizerX", function (e) {
resizeX(e.pageX + 25);
});
</script>
<div id="element1" class="element" style="height:10px; overflow:auto;">Element 1</div>
</div>
<div id="resizerY" style="height:10px; position:absolute; left: 0; right:0; background: green;"></div>
<script type="text/javascript">
resizerY("resizerY", function (e) {
resizeY(e.pageY + 25);
});
</script>
<div id="element3" class="element" style="height:100px; position:absolute; left: 0; bottom: 0; right:0;">Element 3</div>
</div>
<script type="text/javascript">
onresize();
</script>
</body>
</html>另请参阅我的缩放器示例
Thi*_*ago 13
这是一个在所有侧面和角落都有调整器助手的示例
element = document.getElementById("element")
makeResizable(element,10,10)
function makeResizable(element, minW = 100, minH = 100, size = 20)
{
const top = document.createElement('div');
top.style.width = '100%';
top.style.height = size + 'px';
top.style.backgroundColor = 'transparent';
top.style.position = 'absolute';
top.style.top = - (size/2) + 'px';
top.style.left = '0px';
top.style.cursor = 'n-resize';
top.addEventListener('mousedown',resizeYNegative())
element.appendChild(top);
const bottom = document.createElement('div');
bottom.style.width = '100%';
bottom.style.height = size + 'px';
bottom.style.backgroundColor = 'transparent';
bottom.style.position = 'absolute';
bottom.style.bottom = - (size/2) + 'px';
bottom.style.left = '0px';
bottom.style.cursor = 'n-resize';
bottom.addEventListener('mousedown',resizeYPositive())
element.appendChild(bottom);
const left = document.createElement('div');
left.style.width = size + 'px';
left.style.height = '100%';
left.style.backgroundColor = 'transparent';
left.style.position = 'absolute';
left.style.top = '0px';
left.style.left = - (size/2) + 'px';
left.style.cursor = 'e-resize';
left.addEventListener('mousedown',resizeXNegative())
element.appendChild(left);
const right = document.createElement('div');
right.style.width = size + 'px';
right.style.height = '100%';
right.style.backgroundColor = 'transparent';
right.style.position = 'absolute';
right.style.top = '0px';
right.style.right = - (size/2) + 'px';
right.style.cursor = 'e-resize';
right.addEventListener('mousedown',resizeXPositive())
element.appendChild(right);
const corner1 = document.createElement('div');
corner1.style.width = size + 'px';
corner1.style.height = size + 'px';
corner1.style.backgroundColor = 'transparent';
corner1.style.position = 'absolute';
corner1.style.top = - (size/2) + 'px';
corner1.style.left = - (size/2) + 'px';
corner1.style.cursor = 'nw-resize';
corner1.addEventListener('mousedown',resizeXNegative())
corner1.addEventListener('mousedown',resizeYNegative())
element.appendChild(corner1);
const corner2 = document.createElement('div');
corner2.style.width = size + 'px';
corner2.style.height = size + 'px';
corner2.style.backgroundColor = 'transparent';
corner2.style.position = 'absolute';
corner2.style.top = - (size/2) + 'px';
corner2.style.right = - (size/2) + 'px';
corner2.style.cursor = 'ne-resize';
corner2.addEventListener('mousedown',resizeXPositive())
corner2.addEventListener('mousedown',resizeYNegative())
element.appendChild(corner2);
const corner3 = document.createElement('div');
corner3.style.width = size + 'px';
corner3.style.height = size + 'px';
corner3.style.backgroundColor = 'transparent';
corner3.style.position = 'absolute';
corner3.style.bottom = - (size/2) + 'px';
corner3.style.left = - (size/2) + 'px';
corner3.style.cursor = 'sw-resize';
corner3.addEventListener('mousedown',resizeXNegative())
corner3.addEventListener('mousedown',resizeYPositive())
element.appendChild(corner3);
const corner4 = document.createElement('div');
corner4.style.width = size + 'px';
corner4.style.height = size + 'px';
corner4.style.backgroundColor = 'transparent';
corner4.style.position = 'absolute';
corner4.style.bottom = - (size/2) + 'px';
corner4.style.right = - (size/2) + 'px';
corner4.style.cursor = 'se-resize';
corner4.addEventListener('mousedown',resizeXPositive())
corner4.addEventListener('mousedown',resizeYPositive())
element.appendChild(corner4);
function get_int_style(key)
{
return parseInt(window.getComputedStyle(element).getPropertyValue(key));
}
function resizeXPositive()
{
let offsetX
function dragMouseDown(e) {
if(e.button !== 0) return
e = e || window.event;
e.preventDefault();
const {clientX} = e;
offsetX = clientX - element.offsetLeft - get_int_style('width');
document.addEventListener('mouseup', closeDragElement)
document.addEventListener('mousemove', elementDrag)
}
function elementDrag(e) {
const {clientX} = e;
let x = clientX - element.offsetLeft - offsetX
if(x < minW) x = minW;
element.style.width = x + 'px';
}
function closeDragElement() {
document.removeEventListener("mouseup", closeDragElement);
document.removeEventListener("mousemove", elementDrag);
}
return dragMouseDown
}
function resizeYPositive()
{
let offsetY
function dragMouseDown(e) {
if(e.button !== 0) return
e = e || window.event;
e.preventDefault();
const {clientY} = e;
offsetY = clientY - element.offsetTop - get_int_style('height');
document.addEventListener('mouseup',closeDragElement)
document.addEventListener('mousemove',elementDrag)
}
function elementDrag(e) {
const {clientY} = e;
let y = clientY - element.offsetTop - offsetY;
if(y < minH) y = minH;
element.style.height = y + 'px';
}
function closeDragElement() {
document.removeEventListener("mouseup", closeDragElement);
document.removeEventListener("mousemove", elementDrag);
}
return dragMouseDown
}
function resizeXNegative()
{
let offsetX
let startX
let startW
let maxX
function dragMouseDown(e) {
if(e.button !== 0) return
e = e || window.event;
e.preventDefault();
const {clientX} = e;
startX = get_int_style('left')
startW = get_int_style('width')
offsetX = clientX - startX;
maxX = startX + startW - minW
document.addEventListener('mouseup',closeDragElement)
document.addEventListener('mousemove',elementDrag)
}
function elementDrag(e) {
const {clientX} = e;
let x = clientX - offsetX
let w = startW + startX - x
if(w < minW) w = minW;
if(x > maxX) x = maxX;
element.style.left = x + 'px';
element.style.width = w + 'px';
}
function closeDragElement() {
document.removeEventListener("mouseup", closeDragElement);
document.removeEventListener("mousemove", elementDrag);
}
return dragMouseDown
}
function resizeYNegative()
{
let offsetY
let startY
let startH
let maxY
function dragMouseDown(e) {
if(e.button !== 0) return
e = e || window.event;
e.preventDefault();
const {clientY} = e;
startY = get_int_style('top')
startH = get_int_style('height')
offsetY = clientY - startY;
maxY = startY + startH - minH
document.addEventListener('mouseup',closeDragElement,false)
document.addEventListener('mousemove',elementDrag,false)
}
function elementDrag(e) {
const {clientY} = e;
let y = clientY - offsetY
let h = startH + startY - y
if(h < minH) h = minH;
if(y > maxY) y = maxY;
element.style.top = y + 'px';
element.style.height = h + 'px';
}
function closeDragElement() {
document.removeEventListener("mouseup", closeDragElement);
document.removeEventListener("mousemove", elementDrag);
}
return dragMouseDown
}
} #element {
position: absolute;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
left: 40px;
top: 40px;
width: 100px;
height: 100px;
border-radius: 5px;
}<div id="element"></div>mousemove只是在 vanilla js 中使用事件
脚步
将其添加
mousemove到您的目标监听目标
move事件获取指针位置，调整目标大小
代码
const div = document.querySelector(`div.before`);
const box = document.querySelector(`div.container`);
box.addEventListener(`mousemove`, (e) => {
const {
offsetX,
offsetY,
} = e;
div.style.width = offsetX + `px`;
});
现场演示
https://codepen.io/xgqfrms/full/wvMQqZL
参考文献
https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event
https://medium.com/the-z/making-a-ressized-div-in-js-is-not-easy-as-you-think-bda19a1bc53d
我刚刚创建了一个 CodePen，它展示了如何使用 ES6 轻松完成此操作。
http://codepen.io/travist/pen/GWRBQV
基本上，这是执行此操作的类。
let getPropertyValue = function(style, prop) {
let value = style.getPropertyValue(prop);
value = value ? value.replace(/[^0-9.]/g, '') : '0';
return parseFloat(value);
}
let getElementRect = function(element) {
let style = window.getComputedStyle(element, null);
return {
x: getPropertyValue(style, 'left'),
y: getPropertyValue(style, 'top'),
width: getPropertyValue(style, 'width'),
height: getPropertyValue(style, 'height')
}
}
class Resizer {
constructor(wrapper, element, options) {
this.wrapper = wrapper;
this.element = element;
this.options = options;
this.offsetX = 0;
this.offsetY = 0;
this.handle = document.createElement('div');
this.handle.setAttribute('class', 'drag-resize-handlers');
this.handle.setAttribute('data-direction', 'br');
this.wrapper.appendChild(this.handle);
this.wrapper.style.top = this.element.style.top;
this.wrapper.style.left = this.element.style.left;
this.wrapper.style.width = this.element.style.width;
this.wrapper.style.height = this.element.style.height;
this.element.style.position = 'relative';
this.element.style.top = 0;
this.element.style.left = 0;
this.onResize = this.resizeHandler.bind(this);
this.onStop = this.stopResize.bind(this);
this.handle.addEventListener('mousedown', this.initResize.bind(this));
}
initResize(event) {
this.stopResize(event, true);
this.handle.addEventListener('mousemove', this.onResize);
this.handle.addEventListener('mouseup', this.onStop);
}
resizeHandler(event) {
this.offsetX = event.clientX - (this.wrapper.offsetLeft + this.handle.offsetLeft);
this.offsetY = event.clientY - (this.wrapper.offsetTop + this.handle.offsetTop);
let wrapperRect = getElementRect(this.wrapper);
let elementRect = getElementRect(this.element);
this.wrapper.style.width = (wrapperRect.width + this.offsetX) + 'px';
this.wrapper.style.height = (wrapperRect.height + this.offsetY) + 'px';
this.element.style.width = (elementRect.width + this.offsetX) + 'px';
this.element.style.height = (elementRect.height + this.offsetY) + 'px';
}
stopResize(event, nocb) {
this.handle.removeEventListener('mousemove', this.onResize);
this.handle.removeEventListener('mouseup', this.onStop);
}
}
class Dragger {
constructor(wrapper, element, options) {
this.wrapper = wrapper;
this.options = options;
this.element = element;
this.element.draggable = true;
this.element.setAttribute('draggable', true);
this.element.addEventListener('dragstart', this.dragStart.bind(this));
}
dragStart(event) {
let wrapperRect = getElementRect(this.wrapper);
var x = wrapperRect.x - parseFloat(event.clientX);
var y = wrapperRect.y - parseFloat(event.clientY);
event.dataTransfer.setData("text/plain", this.element.id + ',' + x + ',' + y);
}
dragStop(event, prevX, prevY) {
var posX = parseFloat(event.clientX) + prevX;
var posY = parseFloat(event.clientY) + prevY;
this.wrapper.style.left = posX + 'px';
this.wrapper.style.top = posY + 'px';
}
}
class DragResize {
constructor(element, options) {
options = options || {};
this.wrapper = document.createElement('div');
this.wrapper.setAttribute('class', 'tooltip drag-resize');
if (element.parentNode) {
element.parentNode.insertBefore(this.wrapper, element);
}
this.wrapper.appendChild(element);
element.resizer = new Resizer(this.wrapper, element, options);
element.dragger = new Dragger(this.wrapper, element, options);
}
}
document.body.addEventListener('dragover', function (event) {
event.preventDefault();
return false;
});
document.body.addEventListener('drop', function (event) {
event.preventDefault();
var dropData = event.dataTransfer.getData("text/plain").split(',');
var element = document.getElementById(dropData[0]);
element.dragger.dragStop(event, parseFloat(dropData[1]), parseFloat(dropData[2]));
return false;
});
- “很容易”：哈哈 - 另外，这对我来说很糟糕；似乎在选择和取消选择文本时遇到问题。 (2认同)
我创建了一个函数，它接收 html 元素的 id 并在其右侧添加边框，该函数是通用的，只接收 id，因此您可以按原样复制它，它将起作用
var myoffset;
function resizeE(elem){
var borderDiv = document.createElement("div");
borderDiv.className = "border";
borderDiv.addEventListener("mousedown",myresize = function myrsize(e) {
myoffset = e.clientX - (document.getElementById(elem).offsetLeft + parseInt(window.getComputedStyle(document.getElementById(elem)).getPropertyValue("width")));
window.addEventListener("mouseup",mouseUp);
document.addEventListener("mousemove",mouseMove = function mousMove(e) {
document.getElementById(elem).style.width = `${e.clientX - myoffset - document.getElementById(elem).offsetLeft}px`;
});
});
document.getElementById(elem).appendChild(borderDiv);
}
function mouseUp() {
document.removeEventListener("mousemove", mouseMove);
window.removeEventListener("mouseup",mouseUp);
}
function load()
{
resizeE("resizeableDiv");
resizeE("anotherresizeableDiv");
resizeE("anotherresizeableDiv1");
}.border {
position: absolute;
cursor: e-resize;
width: 9px;
right: -5px;
top: 0;
height: 100%;
}
#resizeableDiv {
width: 30vw;
height: 30vh;
background-color: #84f4c6;
position: relative;
}
#anotherresizeableDiv {
width: 30vw;
height: 30vh;
background-color: #9394f4;
position: relative;
}
#anotherresizeableDiv1 {
width: 30vw;
height: 30vh;
background-color: #43f4f4;
position: relative;
}
#anotherresizeableDiv1 .border{
background-color: black;
}
#anotherresizeableDiv .border{
width: 30px;
right: -200px;
background-color: green;
}<body onload="load()">
<div id="resizeableDiv">change my size with the east border</div>
<div id="anotherresizeableDiv1">with visible border</div>
</body>
<div id="anotherresizeableDiv">with editted outside border</div>
</body>resizeE("resizeableDiv"); //this calls a function that does the magic to the id inserted
| 归档时间： |
|
| 查看次数： |
105105 次 |
| 最近记录： |