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

यहाँ एक कम सीएसएस संस्करण है:

<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 के रूप में कॉलम बनाए, एसएएस चलाया, इसे कोड में इस्तेमाल किया, चौड़ाई अब 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; }
    }
}