web-dev-qa-db-fra.com

Comment puis-je faire une largeur div glisser?

J'ai un div imbriqué dans un autre div qui est utilisé pour afficher une console de paramètres. Le div imbriqué a une position fixe dans le parent comme suit:

Div arrangement

J'aimerais ajouter une poignée pouvant être déplacée à la bordure gauche de la div de l'enfant afin que celle-ci puisse être redimensionnée en largeur. Dois-je ajouter un autre div très étroit où le bord gauche est positionné de manière à pouvoir le faire glisser et à recalculer la position afin de redimensionner dynamiquement la propriété width div divs?

Si possible, je préfère m'en tenir à Vanilla JQuery plutôt que de compter sur l'interface utilisateur de JQuery.

jquerycssjquery-uidraggableresizable
16
QFDev

Je pense que c'est ce que vous cherchez 

handles: Quelles poignées peuvent être utilisées pour le redimensionnement.

Exemple:$( ".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
});

vérifier ceci JSFiddle

EDIT: Résolution du problème de CSS, Mise à jour du violon

15
Praveen

Cela peut être réalisé assez facilement avec Vanilla jQuery pour ainsi dire. Je suggère toutefois d’utiliser une disposition de balisage plus efficace, sinon vous rencontrerez des problèmes de position/taille relatifs.

Je voudrais utiliser un conteneur et 2 enfants. Dans l'un des enfants (le second ou le côté droit) contiendra une poignée transparente mais de faible largeur. Pour jQuery, vous devez simplement associer un événement de souris enfoncé à cette poignée et ajuster la taille des autres enfants en conséquence. Voici à peu près à quoi cela ressemblera.

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

9
Austin Brunkhorst

Utilisez l’interaction jQuery UI Resizable, comme indiqué dans le commentaire. Jetez un oeil à cet exemple: http://jqueryui.com/resizable/#max-min

EDIT: Pour le verrouiller uniquement en redimensionnant la largeur, définissez minHeight égal à maxHeight. Cela devrait probablement le faire.

Code de l'exemple ci-dessus:

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

EDIT 2: Pour l’aplying, manipulez de différentes manières: lisez le doc http://api.jqueryui.com/resizable/#option-handles

3
AntonNiklasson

Essayez ce code ..

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

Vous pouvez ensuite ajouter une largeur maximale et minimale

1
Sbml

Vous pouvez également attacher un gestionnaire d'événements comme indiqué ci-dessous, ce qui est utile si vous souhaitez effectuer quelque chose au début ou à la fin du redimensionnement. 

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

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

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

});

N'oubliez pas que vous devez également inclure l'interface utilisateur jQuery; Téléchargez-le et ajoutez quelque chose comme ça:

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