möglich zu beschränken, jQuery resize to x-oder y-Achse, wie drag beschränken?

Diese jQuery können Sie beschränken, ziehen Bewegung, so geschieht es nur auf der Achse angegeben:

$("#draggable2").draggable({ axis: 'x' });

Finden Sie unter: http://jqueryui.com/demos/draggable/#constrain-movement

Dies ist nicht legal jQuery-aber ich wünschte, es waren:

$("#Container").resizable({ minHeight: 150, containment: {axis:'y' } });

Ist es möglich, zu verhindern, dass die Nutzer von #Container breiter, während so dass Sie zu machen es größer?

Dank

InformationsquelleAutor Tim | 2010-05-12
  1. 27

    Ja, es ist möglich durch die Verwendung von UI-Ereignissen. Entlang der x-Achse:

    $("#Container").resizable({
    resize: function(event, ui) {
        ui.size.width = ui.originalSize.width;
    }
});

    oder entlang der y-Achse:

    $("#Container").resizable({
    resize: function(event, ui) {
        ui.size.height = ui.originalSize.height;
    }
});
    • funktioniert wie ein Zauber... danke...
    • Dies kann nicht mehr funktionieren. Ich habe versucht, hard-Codierung der Benutzeroberfläche.Größe.Breite in den resize-Ereignis und fand, dass es ignoriert wurde. Vielleicht Sie einige änderungen jquery brach diese Lösung.
    • stellt sich heraus, das arbeiten in jquery ui 1.9 aber nicht 1.10; ich eingereicht habe, es als einen bug
    • Dies hat bei mir in v1.11.4.. Danke!
    • funktioniert! Dank sehr viel!
    InformationsquelleAutor dtretyakov
  2. 28

    Beide Antworten funktionieren, aber Sie haben die unglückliche Konsequenz daraus, zu zeigen, ein <-> cursor über dem östlichen Grenze, so dass die Benutzer denken, Sie könnten in der Lage sein, um die Größe der Breite. Was ich denke, ist eine bessere übereinstimmung ist zu nennen, das auf der jQuery-Objekt:

    .resizable({handles:'s'})

    da diese einfach entfernen Sie die Möglichkeit der änderung der Breite und der cursor.

    • Liebe diese Antwort. UI freundlich, das ist irgendwie der Punkt. Wenn Sie jemals beschlossen, ein Gespenst oder einen Helfer, die anderen Methoden würde in die Irre führen und möglicherweise frustrieren Benutzer. Dies ist einfach, elegant, und nicht Prozessor-intensive. Beachten Sie auch, dass Sie verwenden können {handles: 's, n'} oder {handles: 'n'} wenn Sie also, Sie sind nicht eingeschränkt, nur in der Lage, um die Größe auf dem unteren Rand
    • Link zur Dokumentation
    • Vielen Dank für diese Antwort, Daumen hoch!
    • Dies funktioniert auch mit bootstrap, die akzeptierte Antwort, die bewirkt, dass der Bereich in der Größe verändert zu werden ein wenig kleiner jedes mal, wenn Sie die Größe ändern.
    InformationsquelleAutor daveagp
  3. 3

    Fand ich, dass nur ausgleichen auf die Höhe oder die Breite der inline-Stil auf das Objekt auf die Größe auch funktioniert. Es hat auch den zusätzlichen Vorteil, nicht an das Objekt, die ursprünglichen Maße (da die Dinge könnten sich ändern, basierend auf dem Inhalt)

    $("#Container").resizable({
    resize: function(event, ui) {
        $(this).css('height','');
    }
});
    • Dies ist eine großartige Lösung. Ich habe einen wirklich hoch skalierbar sein, so dass ich nur das handle auf die se Ecke, ansonsten würde es fehlen. Einstellung der max und min Höhe nicht zu funktionieren scheinen, angesichts des Inhalts fließt als die Größenanpassung passiert.
    • Die einzige funktionierende Lösung hier, wenn man bedenkt Sie sind mit der neuesten version von jQuery UI. Danke.
    InformationsquelleAutor Andy Yang
  4. 2

    Sehe ich zwei Möglichkeiten für Sie, um dies zu tun, eine besser als die andere. Das beste zuerst:

    1) minWidth und maxWidth auf den gleichen Wert (nämlich den Wert, den Sie möchten, dass die Breite zu bleiben).

    $('#theThing').resizable({ minWidth = 200, maxWidth = 200 });

    2) Erstellen einer übergeordneten element mit fester Breite und machen, dass das containment. Ich weiß nicht, wie dies funktionieren wird, auf der Höhe, aber standardmäßig eine div mit keine Höhe angegeben wächst, wenn Ihr Inhalt der Fall ist, so könnte es funktionieren.

    • Danke für den Vorschlag, Tomas. Leider, wenn #theThing ist, die innerhalb #Container und #Container keine explizite Höhe: $("#theThing").resizable({ minHeight: 150, containment: '#Container'}), dann theThing kann nicht geändert werden vertikal. #Container einfach nicht wachsen jenseits der Höhe, die es braucht zum Rendern #theThing in den ersten Platz.
    • haben Sie versucht, den anderen Weg - Einstellung min-und max-width auf denselben Wert? Dies ist, was ich tun würde, anstatt einen container.
    InformationsquelleAutor Tomas Aschan
Schreibe einen Kommentar