Gridstack.js: 개선 제안

귀하의 스니펫으로 README를 업데이트했습니다. 감사합니다.

대화에 늦었지만 반응형 및 유동적이라는 것이 항상 손을 맞대고 작동하는 것은 아니기 때문에 백분율 또는 픽셀 단위의 너비 변수를 원할 수도 있습니다. 한 가지는 반응형 컨테이너를 갖는 것이고 다른 하나는 반응형 위젯이므로 때때로 픽셀 치수를 갖는 것이 나쁜 생각은 아닙니다.

따라서 해당 논리를 미디어 쿼리에 넣으면 다른 픽셀/백분율 기반 위젯 크기를 가질 수 있습니다.

$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 도 추가해야 했습니다(중복 문제 btw를 해결하는 데 사용).

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