jQuery addClass example

Change class name on click in jQuery

by Jithin Raj P R

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.jQueryUI.min.js"></script>
<div id="sortable">
  <div class="ui-state-default grid-stack-item-content"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</div>
  <div class="ui-state-default grid-stack-item-content"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</div>
  <div class="grid-stack-item" data-gs-x="3" data-gs-y="0" data-gs-width="2" data-gs-height="2">
    <div class="grid-stack-item-content"> Item 3</div>
  </div>
</div>


<div class="container-fluid">
  <h1>Float grid demo</h1>

  <div>
    <a class="btn btn-default" id="add-new-widget" href="#">Add Widget</a>
  </div>

  <br />

  <div class="grid-stack">
    <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
      <div class="grid-stack-item-content"></div>
    </div>
    <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="1">
      <div class="grid-stack-item-content"></div>
    </div>
  </div>

CSS

#sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

#sortable div {
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  height: 18px;
  background: #ddd;
}

#sortable div span {
  position: absolute;
  margin-left: -1.3em;
}


.grid-stack {
  background: lightgoldenrodyellow;
  height: 200px !important;
  display: inline-block;
  width: 100%;
}

.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}

.grid-place,.ui-sortable-placeholder {
  background: #ddd;
  border: 2px dashed #999;
}

JavaScript

$(function() {
          $("#sortable,.grid-stack").sortable({
            connectWith: ".grid-stack",
            receive: function(event, ui) {
              this.addNewWidget
            }
          });


          var options = {
            float: true,
            acceptWidgets: true,
            placeholderClass: 'grid-place',
            placeholderText: 'place your elemet here..'

          };
          $('.grid-stack').gridstack(options);
          console.log('item call');
          new function() {
            this.items = [{
                x: 0,
                y: 0,
                width: 2,
                height: 2
              },
              {
                x: 3,
                y: 1,
                width: 1,
                height: 2
              },
              {
                x: 4,
                y: 1,
                width: 1,
                height: 1
              },
              {
                x: 2,
                y: 3,
                width: 3,
                height: 1
              },
              {
                x: 2,
                y: 5,
                width: 1,
                height: 1
              }
            ];

            this.grid = $('.grid-stack').data('gridstack');

            this.addNewWidget = function() {
              var node = this.items.pop() || {
                x: 12 * Math.random(),
                y: 5 * Math.random(),
                width: 1 + 3 * Math.random(),
                height: 1 + 3 * Math.random()
              };
              this.grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
                node.x, node.y, node.width, node.height);
              return false;
            }.bind(this);
          }
        });