Neue Größe Gridster-widget nach Größe

Mit Gridster, wir haben ein Gitter mit der Größe veränderbare widgets mit dem resize.enabled config option.

Nachdem der Benutzer beendet die Größenänderung eines Gridster-widget, würden wir gerne neue endgültige Größe des widget. Wie können wir dies tun?

InformationsquelleAutor microchip78 | 2013-11-22

  1. 12

    Ich habe vor kurzem das arbeiten mit gridster Größenänderung zu.
    Hier ist, wie ich packte die Größe

     $(function () { //DOM Ready
    $scope.gridster = $(".gridster ul").gridster({
        ...
        resize: {
            enabled: true,
            start: function (e, ui, $widget) {
                ...
            },
            stop: function (e, ui, $widget) {
                var newHeight = this.resize_coords.data.height;
                var newWidth = this.resize_coords.data.width;
                ...
            }
        },
        ...
    }).data('gridster');
});

    'NewHeight' und 'newWidth' gelesen werden kann, innerhalb der resize-stop-Ereignis.
    Erkunden Sie auch das 'diese' Instanz, die Größe zu erhalten in Einheiten, und nicht als Pixel.

    InformationsquelleAutor ne1410s

  2. 4

    Wenn Sie möchten, dass die neue Größe in Gridster Blöcke, statt in Pixel, Sie haben ein paar Möglichkeiten.

    Erstens, Ihre Gridster Instanz bekommt zwei Eigenschaften Hinzugefügt, die diese Informationen enthalten, die nach dem resize-Ereignis:

    • .resize_last_sizex - die neue Breite des zuletzt in der Größe verändert widget, in grid-Blöcke
    • .resize_last_sizey - die neue Höhe des zuletzt in der Größe verändert widget, in grid-Blöcke

    Jedoch, die Existenz dieser ist derzeit nicht dokumentiert und es ist mir nicht klar, ob der client-code verwenden soll.

    Vielleicht ein sauberer Ansatz ist die Verwendung der .serialize() Methode auf, übergeben Sie das widget, das wurde gerade geändert. Sie können das widget aus der übergebenen Argumente, um die .ändern der Größe.stop handler. Sie können die .size_x und .size_y Eigenschaften der zurückgegebenen Objekte durch .serialize() um die Größe des neu angepasst widget in der grid-Blöcke.

    Beispiel:

    var gridster = $(".gridster ul").gridster({
    widget_base_dimensions: [100, 100],
    widget_margins: [5, 5],
    helper: 'clone',
    resize: {
        enabled: true,
        stop: function (e, ui, $widget) {
            var newDimensions = this.serialize($widget)[0];

            alert("New width: " + newDimensions.size_x);
            alert("New height: " + newDimensions.size_y);

            //Alternative approach; these properties are undocumented:
            //alert("New width: " + this.resize_last_sizex);
            //alert("New height: " + this.resize_last_sizey);
        }
    }
}).data('gridster');

    Hier ein jsfiddle Nachweis der obige code.

    InformationsquelleAutor Mark Amery

Schreibe einen Kommentar