色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

更改可調(diào)整大小的對齊量

CSS
張吉惟1年前7瀏覽0評論

使用gridstack，我可以調(diào)整小部件的大小。但是，當(dāng)拖動小部件的手柄時，小部件的大小會吸附到特定的大小。這似乎是一個固定的數(shù)額。如果我想將小部件的大小設(shè)置為特定大小之間的一個，我不能這樣做，因為它會捕捉到特定的大小。

有什么方法可以改變縮放比例，使捕捉間隔更??？

抱歉，我是個新手，我一直在使用我在https://codepen.io/AKay/pen/GZXEJx, codepen上找到的一個演示程序，但是我不知道該怎么做。

HTML:

<body>
  <section class="darklue" id="demo">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2>Tile drop</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-2 grid-container sidebar-scroll">
          <div class="sidebar grid-stack-1"></div>
        </div>
        <div class="col-lg-10 grid-container">
          <div class="grid-stack grid-stack-4"></div>
        </div>
      </div>
    </div>
  </section>
</body>

CSS:

body {
  background: #2c3e50;
  color: #fff;
}

.sidebar {
/*   background: lightblue; */
  height: 100%;
}

.grid-stack {
/*   background: #66a3ff; */
}

.sidebar-scroll {
  overflow-y: scroll;
}

.grid-container {
  padding-top: 15px;
  padding-bottom: 15px;
  height: 542px;
  background: grey;
}

.sidebar .grid-stack-item {

  text-align: center;
  line-height: 100px;
  z-index: 10;
  cursor: grab;
  display: inline-block;
}

.grid-stack-item-content {
  background: white;
  color: #2c3e50;
  font-family: 'Indie Flower';
  text-align: center;
  font-size: 20px;
}

.grid-stack .grid-stack-item[data-gs-width="4"] {
  width: 100%
}

.grid-stack .grid-stack-item[data-gs-width="3"] {
  width: 75%
}

.grid-stack .grid-stack-item[data-gs-width="2"] {
  width: 50%
}

.grid-stack .grid-stack-item[data-gs-width="1"] {
  width: 25%
}

.grid-stack .grid-stack-item[data-gs-x="3"] {
  left: 75%
}

.grid-stack .grid-stack-item[data-gs-x="2"] {
  left: 50%
}

.grid-stack .grid-stack-item[data-gs-x="1"] {
  left: 25%
}


.sidebar .grid-stack-item[data-gs-width="1"] {
  width: 100%
}

JS:

$(function() {
   var options = {
     float: true,
     width: 4,
     height: 4,
     animate: true,
     always_show_resize_handle: true,
     cellHeight: 110,
     verticalMargin: 18,
     horizontalMargin: 9,
     placeholder_class: 'grid-stack-placeholder',
     acceptWidgets: '.grid-stack-item'
   };

   $('.grid-stack').gridstack(_.defaults(options));

   var items = [{
     x: 0,
     y: 0,
     width: 1,
     height: 1
   }, {
     x: 1,
     y: 0,
     width: 1,
     height: 1
   }, {
     x: 2,
     y: 0,
     width: 1,
     height: 1
   }, {
     x: 0,
     y: 1,
     width: 1,
     height: 1
   }, {
     x: 3,
     y: 1,
     width: 1,
     height: 1
   }, {
     x: 1,
     y: 2,
     width: 1,
     height: 1
   }];

   $('.grid-stack').each(function() {
     var grid = $(this).data('gridstack');

     _.each(items, function(node) {
       grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
         node.x, node.y, node.width, node.height);
     }, this);
   });

   var sidebar_options = {
     float: true,
     width: 1,
     cellHeight: 110,
     verticalMargin: 18,
     horizontalMargin: 9,
     placeholder_class: 'grid-stack-placeholder',
   };

   $('.sidebar').gridstack(_.defaults(sidebar_options));

   var droppables = [{
     x: 0,
     y: 0,
     width: 1,
     height: 1
   }];

   $('.sidebar').each(function() {
     var sidebar = $(this).data('gridstack');

     _.each(droppables, function(node) {
       sidebar.addWidget($('<div><div class="grid-stack-item-content">I\'m new</div></div>'),
         node.x, node.y, node.width, node.height);
     }, this);
   });
 });

Gridstack使用一個列系統(tǒng)，默認(rèn)情況下它有12列，但是通過一些額外的css你可以增加它?？梢栽趃ridstack選項中調(diào)整行數(shù)。增加行數(shù)和列數(shù)將允許您捕捉更多的大小。

請參見https://github . com/grid stack/grid stack . js # change-grid-columns 和minRow配置選項。