Gridstack.js: 改善提案

スニペットでREADMEを更新しました。 ありがとう。

会話の後半ですが、レスポンシブで流動的であることが常に白兵戦で機能するとは限らないため、パーセンテージまたはピクセルのいずれかで幅を可変にすることもできます... 1つはレスポンシブコンテナを使用することで、もう1つはレスポンシブコンテナを使用することです。レスポンシブウィジェットなので、ピクセルサイズを設定することは悪い考えではありません。

したがって、そのロジックをメディアクエリ内に配置すると、さまざまなピクセル/パーセンテージベースのウィジェットサイズを使用できます。

$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; }
            }
         }
      }
   }
}

これがCSSの少ないバージョンです：

<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これはまだ機能しますか？
私は列を36として作成し、sassを実行し、コードで使用しました。幅は36列に基づいて％sを使用するようになりましたが、ドラッグアンドドロップには望ましくない経験があります。 36列のグリッドにドラッグアンドドロップできません。あちこち移動し続けます。 jsの変更も必要でしたか？ のように見えません...

@ mandys @ ascendantofrainコアgridstack.cssスタイルが原因だと思います。 それらをオーバーライドする必要があります。

.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; }
    }
}

しかし、重複アイテムの問題はまだ解決できませんでした。

バージョン0.3で動作させるには、 min-widthも追加する必要がありました（重複する問題を解決するために使用します）。

.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; }
    }
}