CODEWITHSUNDEEP
javascriptcssgridstack
SteamedBun
SteamedBun

Reputation: 91

Changing the resizable snap amount

Using gridstack, I can resize my widgets. However, when dragging on the widgets' handles, the widget's size will snap to specific sizes. This seems like a fixed amount. If I wanted to set the widget's size to one in between the specific sizes I am unable to do that since it snaps to that specific size.

Is there any way to change the scaling on this so the snapping can happen at smaller intervals?

Sorry, I'm quite new and I've been playing around using a demo I found on codepen, https://codepen.io/AKay/pen/GZXEJx, but am unable to figure out how to do so.

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

Upvotes: 1

Views: 716

Answers (1)

Ozoid
Ozoid

Reputation: 149

Gridstack uses a column system, by default it has 12 columns, but with some additional css you can increase this. The number of rows can be adjusted in gridstack options. increasing the number of rows and columns will allow you to snap to more sizes.

see https://github.com/gridstack/gridstack.js#change-grid-columns and the minRow configuration option.

Upvotes: 0

Related Questions