Tengo el siguiente código de muestra que usa jQuery Resizable para los identificadores e, w. Puedo ver que el controlador "e" funciona como se esperaba, pero para "w" siempre cambia el ancho de "e".
¿Qué ocurre? Realmente aprecio cualquier ayuda, gracias...
cuerpo {
margen: 50px;
}
.fila {
ancho: 900px;
altura: automático;
}
.col {
posición: relativa;
altura mínima: 331px;
altura: 331px;
ancho: 33,333%;
fondo: #ccc;
}
.handle-w,
.manejar-e {
fondo: #fff;
borde: 2px sólido #00a0d2;
borde-radio: 50%;
altura: 12 píxeles;
ancho: 12 píxeles;
cursor: e-cambiar tamaño;
arriba: 50%;
transformar: traducirY(-50%);
posición: absoluta;
}
.manejar-w {
izquierda: -7px;
}
.manejar-e {
derecha: -7px;
}
</head> <body> <div class="row"> <div class="col"> <div class="handle-w"></div> <div class="handle-e"></div> </div> </div> <script src="external/jquery/jquery.js"></script> <script src="jquery-ui.js"></script> <script> $(document).ready(function () { var col = $('.col'); col.resizable({ containment: col.closest('.row'), handles: { 'w': col.find('.handle-w'), 'e': col.find('.handle-e') }, }); }); </script> </body> </html>
O puede ver la demostración en vivo en jsfiddle aquí https://jsfiddle.net/yhutxfvr/
La forma fácil de solucionar este problema es establecer la propiedad handles de la siguiente manera:
$(document).ready(function () { var col = $('.col'); col.resizable({ /* Added the following line of code. */ aspectRaitio: true, containment: col.closest('.row'), /* The following line of code has been changed. */ handles: 'n, e, s, w' }); });Además, le sugiero que revise las siguientes publicaciones. Se discuten problemas similares pero no sinónimos: