L'émulation image-redimensionner comportement avec les divisions à l'aide de jQuery sans l'aide de jQuery UI?

Je suis de la conversion d'un site pour un client à partir d'un jeu de cadres pour les divs. Une fonction que le client a est une barre latérale qui peut être redimensionné en fonction de combien d'espace les besoins de l'utilisateur. En utilisant des images le redimensionnement de cet encadré a été construit en. Cependant, je vais avoir quelques difficultés à l'émulation de cette capacité en jQuery.

Je ne souhaite pas l'utilisation de jQuery UI pour ce faire, je n'ai pas besoin de toutes les fonctionnalités que l'INTERFACE utilisateur de la suite, et ce serait plutôt juste écrire quelques lignes de code pour prendre soin de cela.

J'ai seulement besoin de les redimensionner dans le plan horizontal, vertical dimensions sont fixes.

Actuellement, j'ai une solution (sorte de) œuvres. La div sidebar peut être redimensionnée, mais seulement si un utilisateur clique sur le redimensionnable div, fait glisser la souris, puis clique sur le div de nouveau (pour supprimer l'événement mousemove).

L'expérience que je veux, c'est ceci: Un utilisateur survole l'redimensionnable div, appuie sur le bouton de la souris enfoncé, puis la traîne de la div à être plus grands ou plus petits, et relâche le bouton.

Le problème que je rencontre est le suivant: Si un utilisateur clique sur mon redimensionnable div, puis essaie de le faire glisser pour le rendre plus petit/plus grand, la souris devient le "non" l'icône, et il y a une version transparente de mon div qui est de la drogue avec la souris.

C'est peut-être mieux expliqué par le contrôle de mon code:.

$(document).ready(function() {
var i = 0;
   $('#dragbar').mousedown(function(){
        $('#mousestatus').html("mousedown" + i++);
       $(document).mousemove(function(e){
          $('#position').html(e.pageX +', '+ e.pageY);
          $('#sidebar').css("width",e.pageX+2);
       })
       console.log("leaving mouseDown");
    });
   $(document).mouseup(function(){
       $('#clickevent').html('in another mouseUp event' + i++);
       $(document).unbind('mousemove');
       });
});

et HTML:

<div id="header">
    header
    <span id="mousestatus"></span>
    <span id="clickevent"></span>
</div>
<div id="sidebar">
     <span id="position"></span>
    <div id="dragbar">
    </div>
    sidebar
</div>
<div id="main">
    main
</div>
<div id="footer">
    footer
</div>

Voici une temp page web avec la mise de base de travail:

http://pastehtml.com/view/1crj2lj.html

Le problème peut être vu si vous essayez de redimensionner la chose étiquetés "encadré" à l'aide de la barre marron.

OriginalL'auteur user210099 | 2011-01-12