jQuery UI déplaçable avec la position absolue et en bas de la propriété

Je suis à l'aide de jQuery UI pour créer un déplaçable <div>. Le <div> est absolument positionné en bas à droite ou en haut à gauche à l'aide de CSS:

.dragbox {
    position: absolute;
    width: 140px;
    min-height: 140px; /* I need to use min-height */
    border: 3px solid black;
    padding: 10px;
}
.bottom {
    bottom: 5px; /* causes box to resize when dragged */
    right: 5px;
}
.top {
    top: 5px; /* does not cause box to resize */
    left: 5px;
}

Le code HTML ressemble à ceci:

<div class="dragbox bottom">
    Bottom Box :(
</div>
<div class="dragbox top">
    Top Box :)
</div>

Le JavaScript est $('.dragbox').draggable(); pour faire de la <div> éléments déplaçables. La partie supérieure gauche <div> fonctionne comme prévu, mais le bas-droit <div> redimensionne lorsque vous les faites glisser. Si je change le min-height matériels de .dragbox à height je vois le comportement attendu pour les deux zones, mais j'ai besoin d'utiliser min-height pour cela, car je ne connais pas la longueur de l'intérieur de contenu.

Comment dois-je positionner le <div> en bas à droite et de permettre le glissement sans avoir la <div> redimensionner lorsque traîné? Le haut-gauche et bas-droit <div> éléments doivent se comporter de la même manière.

DÉMO (J'utilise Chrome 27 et Safari 6)

OriginalL'auteur ChrisP | 2013-06-25

  1. 13

    de jQuery déplaçable œuvres de manipuler le css top et left valeurs. Lorsqu'une zone a à la fois top et bottom ensemble de valeurs (et non statique de la hauteur), la boîte s'étirer pour correspondre à la fois des propriétés. C'est ce qui cause le redimensionnement.

    Une solution pourrait être de créer une hauteur statique sur la zone, ou si ce n'est pas une option, réglez le bas la valeur "auto" lorsque le déplaçable est créé, et chercher le courant "top" de la position dans le même temps, assurez-vous que l'élément reste en place.

    $('.dragbox').draggable({
    create: function( event, ui ) {
        $(this).css({
            top: $(this).position().top,
            bottom: "auto"
        });
    }
});

    http://jsfiddle.net/expqj/8/

    À l'aide de cette idée, j'ai pu résoudre mon cas, où en plus de la boîte a une dynamique de la hauteur (et devrait croître vers le haut), mais heureusement, c'est de ne pas changer lors d'un drag. Je fais la même chose, mais à l'aide de la "start" et "stop" options de sorte que j'ai le jeu en haut de l'attribut comme l'ancre (auto-ing bas) lorsque le déplacement commence et les échanger en arrière quand il se termine.

    OriginalL'auteur xec

  2. 1

    @xec m'a donné l'idée principale, et j'ai changé de cette façon et il a travaillé pour moi;

     jQuery("#container").draggable({
                    start: function (event, ui) {
                        $(this).css({
                            right: "auto",
                            top: "auto"
                        });
                    }
                });

    OriginalL'auteur Teoman shipahi

  3. 0

    pour moi, travaillé de cette façon (pour mon fond, à gauche absolu placé div):

            $("#topBarUpDownDiv").draggable({ axis: "x",
            stop: function( event, ui ) {
                var elem=$(this)[0];
                $(elem).css({ bottom: $(this).position().bottom, top: "auto" });
           }
        });

    OriginalL'auteur BernieSF