Comment puis-je redimensionner un DIV en en faisant glisser UN SEUL côté ?

Question

Permettez-moi d'être plus précis... je ne veux pas que le DIV redimensionne PENDANT QUE je traîne. Je veux le faire glisser (et peut-être qu'une ligne verticale suit mon curseur) et quand je relâche, il redimensionne le div.

Answer 1

Vous cherchez à le faire, très belle solution par Gaby. Bien que mon exigence était de ne pas avoir d'éléments absolus et d'utiliser des pourcentages au lieu de pixels, j'ai donc un peu changé le code de Gaby pour répondre à cela (si quelqu'un est intéressé)

CSS

#main{
  background-color: BurlyWood;
  float: right;
  height:200px;
  width: 75%;
}
#sidebar{
  background-color: IndianRed;
  width:25%;
  float: left;
  height:200px;
  overflow-y: hidden;
}
#dragbar{
  background-color:black;
  height:100%;
  float: right;
  width: 3px;
  cursor: col-resize;
}
#ghostbar{
  width:3px;
  background-color:#000;
  opacity:0.5;
  position:absolute;
  cursor: col-resize;
  z-index:999
}

JS

var i = 0;
var dragging = false;
$('#dragbar').mousedown(function(e){
   e.preventDefault();

   dragging = true;
   var main = $('#main');
   var ghostbar = $('<div>',
                    {id:'ghostbar',
                     css: {
                            height: main.outerHeight(),
                            top: main.offset().top,
                            left: main.offset().left
                           }
                    }).appendTo('body');

    $(document).mousemove(function(e){
      ghostbar.css("left",e.pageX+2);
   });

});

$(document).mouseup(function(e){
   if (dragging) 
   {
       var percentage = (e.pageX / window.innerWidth) * 100;
       var mainPercentage = 100-percentage;

       $('#console').text("side:" + percentage + " main:" + mainPercentage);

       $('#sidebar').css("width",percentage + "%");
       $('#main').css("width",mainPercentage + "%");
       $('#ghostbar').remove();
       $(document).unbind('mousemove');
       dragging = false;
   }
});

Démo : http://jsfiddle.net/Bek9L/3020/

Answer 2

Il existe un moyen beaucoup plus simple d'y parvenir. CSS 3 a une propriété resize pour rendre un élément html redimensionnable, tout en suivant d'autres propriétés CSS comme les largeurs min/max etc.

.resizeable {
  resize: both;
  overflow: auto;
  border: 2px solid black;
}

Answer 3

Utilisez l'interface utilisateur jQuery avec l'option fantôme :

Voir la démo de jsFiddle :

$( "#resizable" ).resizable({ ghost: true });