Gridstack.js: Verbesserungsvorschlag

Ich habe README mit Ihrem Snippet aktualisiert. Danke schön.

Zu spät zum Gespräch, aber vielleicht möchten Sie auch die Breite variabel haben, entweder in Prozent oder in Pixeln, da reaktionsschnell und flüssig nicht immer von Hand zu Hand funktioniert ... Eine Sache ist, einen ansprechenden Container zu haben, und eine andere ist es, ein responsives Widget, daher ist es manchmal keine schlechte Idee, Pixelabmessungen zu haben.

Wenn Sie diese Logik also in eine Medienabfrage einfügen, können Sie unterschiedliche pixel-/prozentuale Widgetgrößen verwenden.

$gridstack-columns: 12;
$resolution: 1440px;

<strong i="7">@media</strong> (min-width: 1440px) {
   .container {
      .grid-stack {
         .grid-stack-item {
            position: absolute !important;

            <strong i="8">@for</strong> $i from 1 through $gridstack-columns {
               &[data-gs-width='#{$i}'] { width: ($resolution / $gridstack-columns) * $i; }
               &[data-gs-x='#{$i}'] { left: ($resolution / $gridstack-columns) * $i; }
               &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: ($resolution / $gridstack-columns) * $i; }
               &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: ($resolution / $gridstack-columns) * $i; }
            }
         }
      }
   }
}

Hier ist eine weniger CSS-Version:

<strong i="6">@columns</strong>: 6;
.gs-item(@n) when (<strong i="7">@n</strong> > 0) {
  .gs-item(<strong i="8">@n</strong> - 1);

  &[data-gs-width="@{n}"] { width: (100% / @columns) * @n; }
  &[data-gs-x="@{n}"] { left: (100% / @columns) * @n; }
  &[data-gs-min-width="@{n}"] { min-width: (100% / @columns) * @n; }
  &[data-gs-max-width="@{n}"] { max-width: (100% / @columns) * @n; }
}

.grid-stack-item {
  .gs-item(@columns);
}

@ascendantofrain @cspeer @troolee @radiolips funktioniert das noch?
Ich habe Spalten als 36 erstellt, sass ausgeführt, im Code verwendet, die Breiten verwenden jetzt %s basierend auf 36 Spalten, aber Drag / Drop hat unerwünschte Erfahrungen. Ich bin nicht in der Lage, ein 36-Spalten-Raster per Drag & Drop zu verschieben, es bewegt sich hier und da weiter. Brauchten wir auch js-Änderungen? Sieht nicht so aus...

@mandys @ascendantofrain Ich denke, es liegt an den Kernstilen von gridstack.css. Sie müssen sie überschreiben:

.grid-stack > .grid-stack-item {

    $gridstack-columns: 200;

    <strong i="8">@for</strong> $i from 1 through $gridstack-columns {
        &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
        &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
    }
}

Aber ich konnte das Problem der überlappenden Elemente noch nicht lösen.

Ich musste auch min-width hinzufügen, damit es mit Version 0.3 funktioniert (die ich übrigens verwende, um das überlappende Problem zu lösen.)

.grid-stack > .grid-stack-item {

    $gridstack-columns: 36;

    <strong i="7">@for</strong> $i from 1 through $gridstack-columns {
        &[data-gs-width='#{$i}'] { 
          width: (100% / $gridstack-columns) * $i;
          min-width: (100% / $gridstack-columns) * $i; 
        }
        &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
    }
}