jQuery Manuel Redimensionnable DIV

Je suis en train de créer un redimensionnable div sans l'aide de jQuery interface de la bibliothèque.

var myY = 0;
var mouseDown = false;
var originalHeight = 0; 

function resize(e){
    if(mouseDown == true){
        $("#cooldiv").height(originalHeight+e.pageY-myY);
    }
} 

$(document).ready(function(){
    $().mouseup(function(e){
        myY = 0;
        mouseDown = false;
        originalHeight = 0;
        $().unbind("mousemove", resize);
    });

    $("#resizeBar").mousedown(function(e){
        myY = e.pageY;
        originalHeight = $("#cooldiv").height();
        mouseDown = true;
        $().bind("mousemove", resize);
    });
});

...

<div id="cooldiv" style="width: 500px; height: 300px; background-color: #cccccc; position: relative;">
<div id="resizeBar" style="height: 10px; width: 500px; background-color: #aaaaaa; position: absolute; bottom: 0;"></div>
</div>

La première redimensionner fonctionne très bien(c'est à dire mousedown, mousemove puis mouseup), mais sur d'autres (mousedown+mousemove)s, le navigateur tente de faire glisser le tout resizeBar div au lieu de bien le redimensionnement de son conteneur parent. On mouseup, la div commence alors le redimensionnement "cooldiv" mousemove sans mousedown nécessaire, jusqu'à ce qu'un autre clic de la souris.

Ces problèmes n'apparaissent pas dans Internet Explorer.

Pourquoi doyou vide sélecteurs pour le lier et de délier? Devraient-ils être $(this).lier/délier?
Avez-vous pensé à utiliser l'INTERFACE utilisateur de jQuery et redimensionnable?
D'accord, prenez jQuery UI et l'utilisation redimensionnable. Si vous êtes inquiet au sujet de la taille, il vous suffit de prendre les bits de la bibliothèque d'INTERFACE utilisateur, vous n'avez pas besoin de l'ensemble du lot.
Je suis conscient que je peux utiliser jQuery UI, mais je ne veux construire un seul et unique contrôle redimensionnable. Même minimisé, jQuery UI, qui est redimensionnable seul ajoute 26kb.
25 ko semble être un prix raisonnable à payer pour une version de travail qui va être pris en charge et mis à jour avec les versions futures.

OriginalL'auteur JC. | 2009-02-09

  1. 1

    Essayez d'ajouter

    $("#cooldiv").focus();

    à la fin de votre mouseup fonction.

    OriginalL'auteur Emmett

  2. 1

    l'occasion, il était en mesure de briser le redimensionnement de la fonctionnalité, où je voudrais obtenir le "non autorisé" curseur et la boîte ne serait pas de redimensionner dynamiquement, bien que lorsque je passe la souris, elle serait redimensionner correctement et de rester de cette façon.

    ajoutant return false; à la fin de la resize fonction semble arrêter le navigateur d'essayer de sélectionner/déplacer la barre de redimensionnement. je travaille dans un milieu limité, donc je ne peux vérifier avec ie8 (et ie8 en mode ie7).

    j'ai dû remplacer vos appels à $() avec $(document) pour obtenir ce travail. je vous recommande également le déplacement de la mousemove de liaison de la mousedown gestionnaire, et la suppression de la déliaison appel.

    OriginalL'auteur lincolnk

  3. 1

    Ceci est un exemple avec un "h" tag comme séparateur (entre les 2 divs):

    <div>Text here</div>
<hr />
<div>Other text</div>

    Javascript: (à l'aide de JQuery):

    var hr = null;
$("hr").mousedown(function(e) {
    hr = {
        y : e.pageY,
        p : $(this).prev(),
        n : $(this).next(),
        ph: $(this).prev().height(),
        nh: $(this).next().height()
    };
    e.preventDefault();
});
$(document).mousemove(function(e) {
    if(hr) {
        hr.p.height(hr.ph+(e.pageY - hr.y));
        hr.n.height(hr.nh-(e.pageY - hr.y));
    }
    e.preventDefault();
}).mouseup(function(e) {
    hr = null;
    e.preventDefault();
});

    CSS (facultatif):

    hr {
    background-color: #DDD;
    border: 1px solid #AAA;
    cursor: n-resize;
    height: 10px;
}

    OriginalL'auteur lepe