jquery - listas - ¿Cómo hago un div div ampliable?

resizable jquery

Question

Tengo un div anidado dentro de otro div que se utiliza para mostrar una consola de configuración. El div anidado tiene una posición fija dentro del padre de la siguiente manera:

Me gustaría agregar un controlador que se pueda arrastrar al borde izquierdo del div niño para que el div niño pueda cambiar el tamaño en el ancho. ¿Necesito agregar otro div muy estrecho donde se coloca el borde izquierdo para poder arrastrarlo y recalcular la posición para redimensionar dinámicamente la propiedad de ancho de divs secundarios?

Prefiero seguir con JQuery de vainilla si es posible en lugar de confiar en la interfaz de usuario de JQuery.

Answer 1

Esto se puede lograr bastante fácilmente con vanilla jQuery por así decirlo. Sin embargo, sugiero usar un diseño de marcado más eficiente, o se encontrará con algunos problemas relativos de posición / tamaño.

Yo usaría un contenedor, y 2 niños. En uno de los niños (el segundo, o el lado derecho) contendrá un asa transparente pero con un ancho pequeño. Para el jQuery, solo adjuntará un evento de mouse hacia abajo a ese controlador y ajustará los tamaños de los otros niños en consecuencia. Aquí es aproximadamente cómo se verá.

HTML

<div id="container">
    <!-- Left side -->
    <div id="left"> This is the left side''s content! </div>
    <!-- Right side -->
    <div id="right">
        <!-- Actual resize handle -->
        <div id="handle"></div> This is the right side''s content!
    </div>
</div>

JavaScript

var isResizing = false,
    lastDownX = 0;

$(function () {
    var container = $(''#container''),
        left = $(''#left''),
        right = $(''#right''),
        handle = $(''#handle'');

    handle.on(''mousedown'', function (e) {
        isResizing = true;
        lastDownX = e.clientX;
    });

    $(document).on(''mousemove'', function (e) {
        // we don''t want to do anything if we aren''t resizing.
        if (!isResizing) 
            return;

        var offsetRight = container.width() - (e.clientX - container.offset().left);

        left.css(''right'', offsetRight);
        right.css(''width'', offsetRight);
    }).on(''mouseup'', function (e) {
        // stop resizing
        isResizing = false;
    });
});

JSFiddle

Answer 2

Intenta este código ..

$(''.child'').resizable({
    handles: ''w''
});

Usted puede agregar entonces un ancho máximo y mínimo

Answer 3

También puede adjuntar un controlador de eventos como se muestra a continuación, que es útil si desea hacer algo al inicio o al final del cambio de tamaño.

$("#resizeableElementId").resizable({handles: ''n,w,s,e'', minWidth: 200, maxWidth: 600}); 

$("#resizeableElementId").on( "resizestop", function( event, ui ) {

    console.log(''resize ended'');
    console.dir(event);

});

Recuerda que también debes incluir jQuery UI; Descárgalo y agrega algo como esto:

<link rel="stylesheet" type="text/css" href="jquery-ui-1.11.1.custom/jquery-ui.min.css" />

Answer 4

Utilice la interacción jQuery UI Resizable, como se menciona en el comentario. Eche un vistazo a este ejemplo: http://jqueryui.com/resizable/#max-min

EDITAR: para bloquearlo solo para redimensionar el ancho, establezca minHeight igual a maxHeight. Eso probablemente debería hacerlo.

Código del ejemplo anterior:

$(function() {
  $( "#resizable" ).resizable({
    minHeight: 250,
    maxHeight: 250,
    minWidth: 200,
    maxWidth: 350
  });
});

EDITAR 2: Para aplicar maneja diferentes maneras: lea el documento http://api.jqueryui.com/resizable/#option-handles

Answer 5

Creo que esto es lo que estás buscando.

Asas: Qué asas pueden usarse para cambiar el tamaño.

Ejemplo: $( ".selector" ).resizable({ handles: "n, e, s, w" });

HTML:

<div class="parent">
    <div class="child"></div>
</div>

CSS:

.parent {
    position: relative;
    width: 800px;
    height: 500px;
    background: #000;
}
.child {
    position: absolute;
   right: 0;
    top: 0;
    width: 200px;
    height: 100%;        
    background: #ccc;
}

JS:

$(''.child'').resizable({
    handles: ''n,w,s,e'',
    minWidth: 200,
    maxWidth: 400
});

revisa este JSFiddle

EDITAR: Resuelto el problema de css, fiddle actualizado