Gridster

by Şuayip Ekmekci

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/gridster.js/0.5.3/jquery.gridster.css">
<script src="//cdn.jsdelivr.net/gridster.js/0.5.3/jquery.gridster.js"></script>
<button id="deneme">add</button>
<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">1
            <div class="remove">x</div>
        </li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">2
            <div class="remove">x</div>
        </li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">3
            <div class="remove">x</div>
        </li>
        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1">4
            <div class="remove">x</div>
        </li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2">5
            <div class="remove">x</div>
        </li>
        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">6
            <div class="remove">x</div>
        </li>
        <li data-row="2" data-col="4" data-sizex="2" data-sizey="1">7
            <div class="remove">x</div>
        </li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1">8
            <div class="remove">x</div>
        </li>
        <li data-row="1" data-col="5" data-sizex="1" data-sizey="1">9
            <div class="remove">x</div>
        </li>
        <li data-row="3" data-col="5" data-sizex="1" data-sizey="1">10
            <div class="remove">x</div>
        </li>
        <li data-row="1" data-col="6" data-sizex="1" data-sizey="1">11
            <div class="remove">x</div>
        </li>
        <li data-row="2" data-col="6" data-sizex="1" data-sizey="2">12
            <div class="remove">x</div>
        </li>
    </ul>
</div>

CSS

.gridster ul {
    list-style: none;
    background-color: gray;
}
.gridster ul li {
    background-color: red;
}
.remove, .remove1 {
    position:absolute;
    top:0;
    right:5px;
    cursor:pointer;
}

JavaScript

var gridster;

      function deneme() {

          gridster = $(".gridster ul").gridster({
              widget_base_dimensions: [100, 55],
              widget_margins: [5, 5],
              helper: 'clone',
              resize: {
                  enabled: true,
                  max_size: [4, 4],
                  min_size: [1, 1]
              }
          }).data('gridster');

      }

      $('#deneme').click(function () {
          gridster.add_widget('<li id="block">Hello, now delete me <div class="remove1">x</div></li>', 1, 1);
          $('.remove1').on('click', function () {
              gridster.remove_widget($(this).parent());
          });
      })

       $('.remove').on('click', function () {
          gridster.remove_widget($(this).parent());
      });

      deneme();