JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<script src="http://gridster.net/dist/jquery.gridster.js"></script>
<div role="main">

   

   <section class="demo">

        <div class="gridster"  id="grid1">
          <ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"
            id="test">1
                <div class="box">
                    <a href="http://www.naver.com">Here is a link</a>
                </div>
            </li>
            <li data-row="1" data-col="2" data-sizex="3" data-sizey="1">2</li>
            <li data-row="1" data-col="3" data-sizex="1" data-sizey="1">3</li>
            <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">4</li>
            <li data-row="2" data-col="2" data-sizex="1" data-sizey="1">5</li>
            <li data-row="2" data-col="3" data-sizex="1" data-sizey="1">6</li>
            <li data-row="2" data-col="4" data-sizex="1" data-sizey="1">7</li>
            <li data-row="2" data-col="5" data-sizex="1" data-sizey="1">8</li>
            <li data-row="3" data-col="1" data-sizex="2" data-sizey="1">9</li>
            <li data-row="3" data-col="2" data-sizex="2" data-sizey="1">10</li>
            <li data-row="3" data-col="3" data-sizex="1" data-sizey="1">10</li>
          </ul>
        </div>
    </section>

   

  

</div>

CSS

/*! gridster.js - v0.1.0 - 2012-10-20
* http://gridster.net/
* Copyright (c) 2012 ducksboard; Licensed MIT */

.gridster{position:relative}

.gridster>*{margin:0 auto;-webkit-transition:height .4s;-moz-transition:height .4s;-o-transition:height .4s;-ms-transition:height .4s;transition:height .4s}

.gridster .gs_w{z-index:2;position:absolute}

.ready .gs_w:not(.preview-holder){-webkit-transition:opacity .3s,left .3s,top .3s;-moz-transition:opacity .3s,left .3s,top .3s;-o-transition:opacity .3s,left .3s,top .3s;transition:opacity .3s,left .3s,top .3s}

.ready .gs_w:not(.preview-holder){-webkit-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;-moz-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;-o-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;transition:opacity .3s,left .3s,top .3s,width .3s,height .3s}

.gridster .preview-holder{z-index:1;position:absolute;background-color:#fff;border-color:#fff;opacity:.3}

.gridster .player-revert{z-index:10!important;-webkit-transition:left .3s,top .3s!important;-moz-transition:left .3s,top .3s!important;-o-transition:left .3s,top .3s!important;transition:left .3s,top .3s!important}

.gridster .dragging{z-index:10!important;-webkit-transition:all 0s!important;-moz-transition:all 0s!important;-o-transition:all 0s!important;transition:all 0s!important}


/* =============================================================================
   NORMALIZATION
========================================================================== */

*  {
  margin: 0;
  padding: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
[hidden] { display: none; }

ul, ol {
    list-style: none;
}


/* =============================================================================
   COMMONS
========================================================================== */

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
 ...

JavaScript

$(function(){

     var gridster = $(".gridster > ul").gridster({
        widget_margins: [10, 20],
        widget_base_dimensions: [140, 140],
        min_cols: 5,
        draggable: {
            stop: function(event, ui){ 
                console.log("stop");
                console.log(this.serialize());
                console.log(this.serialize_changed());
                console.log(event);
                console.log(ui);
            },
            start : function(event, ui){ 
                console.log("start");
            }
        }
    }).data('gridster');
      


  });