Me preguntaba cómo podemos hacer que un elemento HTML como <div>
o <p>
elemento de etiqueta se pueda cambiar de tamaño al hacer clic utilizando JavaScript puro, no la biblioteca jQuery o cualquier otra biblioteca.¿Cómo hacer que el elemento HTML se pueda redimensionar usando javascript puro?
Respuesta
Realmente recomiendo el uso de algún tipo de biblioteca, pero se preguntó por él, se obtiene:
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);
}
recordar que esto no puede funcionar en todos los navegadores (probado sólo en Firefox, definitivamente no funciona en IE < 9).
increíble, agradezco mucho su ayuda @ Pumbaa80 – monk
una pregunta, ¿qué? hace este valor de '10' en el código parseInt (document.defaultView.getComputedStyle (p) .width, 10); – monk
Es un argumento de ['parseInt()'] (https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/parseInt) que asegura que procesa números decimales. – user123444555621
¿qué tal una solución pure css3?
div {
resize: both;
overflow: auto;
}
Desafortunadamente, el tamaño CSS no es compatible con IE – pyanzin
Esto es bueno, pero no es flexible. –
Creo que es importante mencionar: Usar css 'resize' Webkit Browsers no le permitirá cambiar el tamaño de un elemento para hacerlo más pequeño, solo que más grande (en ambas dimensiones). – Rotareti
Ver mi navegadores compatibles resizer.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>resizer</title>
<meta name="author" content="Andrej Hristoliubov [email protected]">
<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>
También vea mi ejemplo de resizer
es simple:
Ejemplo: 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);
}
¡Gran solución! Probado y funciona para Firefox56, Chrome61, Opera48 e IE11. – JCO9
acabo de crear un CodePen que muestra cómo se puede hacerse bastante fácil con ES6.
http://codepen.io/travist/pen/GWRBQV
Básicamente, aquí es la clase que hace esto.
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;
});
- 1. hacer que un objeto se pueda hacer clic desde detrás de otro elemento en html
- 2. Obtener índice del elemento cliqueado usando javascript puro
- 3. Html hacer que se pueda hacer clic en el texto sin convertirlo en un hipervínculo
- 4. ¿Cómo hacer que UITableView se pueda reorganizar?
- 5. Obtener el valor del elemento seleccionado en el evento usando JavaScript puro
- 6. ¿Cómo hacer que el div subyacente no se pueda cliquear?
- 7. ¿Hay alguna manera de hacer que el texto no se pueda seleccionar en una página HTML?
- 8. ¿Hay un validador Javascript X/HTML puro?
- 9. ¿Cómo puedo hacer que un elemento se pueda arrastrar en jQuery?
- 10. Cargar un archivo binario usando JavaScript puro
- 11. ¿Cómo hacer que el botón no se pueda hacer clic después de hacer clic en él?
- 12. ¿Cómo hacer que el cuadro de entrada de texto se pueda redimensionar (como textarea) arrastrando la esquina inferior derecha usando jQuery?
- 13. que afectan elemento padre de: elemento focus'd (puro CSS + HTML preferido)
- 14. ¿Cómo hago que un enlace no se pueda hacer clic?
- 15. Cómo hacer que UIScrollView siempre se pueda desplazar
- 16. ¿Cómo hacer que mi ImageView pueda ampliarse?
- 17. ¿Cómo obtener el elemento llamante usando Javascript?
- 18. HTML adjunto que contiene javascript no se ejecuta, ¿cómo puedo hacer que se ejecute?
- 19. Cómo hacer que un LinearLayout pueda desplazarse
- 20. ¿Cómo hacer que un elemento HTML no sea enfocable?
- 21. convertir HTML (que tiene Javascript) a PDF usando JavaScript
- 22. ¿Hay algo que no pueda hacer con el bigote?
- 23. Hacer un elemento de la lista que se puede hacer clic (HTML/CSS)
- 24. ¿Cómo se escucha que un elemento HTML se mueva en JavaScript?
- 25. ¿Hay alguna manera de hacer que un enlace se pueda hacer clic en el terminal OSX?
- 26. Cómo hacer que un elemento en una vista de lista no se pueda hacer clic en Android
- 27. ¿Cómo impido que se recargue el formulario usando Javascript?
- 28. Cliente HTML WebDAV puro
- 29. ¿Cómo cambio el ID de un elemento HTML con JavaScript?
- 30. Cómo hacer que el diálogo de la interfaz de usuario de jQuery no se pueda cambiar de tamaño
Estoy seguro de que alguien dará una respuesta a continuación, pero es simple de hacer en jQuery, y también ayuda con problemas entre navegadores. Sugiero usar jQuery, a menos que sea un problema importante. – Undefined
¿Qué quiere decir 'resizeable'? Si desea cambiar el tamaño de la ventana, puede establecer el ancho del elemento en%. –
Así es como cambio el tamaño de un elemento div: https://stackoverflow.com/questions/43411103/resize-div-vertical-or-horizontal/46552497#46552497 – sfanjoy