JSFiddle - React, Tailwind, and code Playground

by dpnminh

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://rawgit.com/ManifestWebDesign/angular-gridster/master/src/angular-gridster.js"></script>
<link rel="stylesheet" href="https://rawgit.com/ManifestWebDesign/angular-gridster/master/dist/angular-gridster.min.css">
<div class="gridster-container">
<div ng-app="mainApp" ng-controller="mainCtrl">
<div gridster="gridsterOpts">
    <ul>
        <li style="border: solid 1px;"gridster-item="item" ng-repeat="item in standardItems">
          <div class="ddd" style="width: 100%; background: #ddd; padding: 10px 0px">Handle</div>
            {{ item }}
        </li>
    </ul>
</div>
</div>
</div>

CSS

.gridster-container{
  width:auto;
  margin:10px;
  position:relative
  
}

JavaScript

var app = angular.module('mainApp', ['gridster']);

app.controller('mainCtrl', ['$scope', function ($scope) {
        $scope.standardItems = [
            {size: {x: 2, y: 1}, position: [0, 0]},
            {size: {x: 2, y: 2}, position: [0, 2]},
            {size: {x: 1, y: 1}, position: [0, 4]},
            {size: {x: 1, y: 1}, position: [0, 5]},
            {size: {x: 2, y: 1}, position: [1, 0]},
            {size: {x: 1, y: 1}, position: [1, 4]},
            {size: {x: 1, y: 2}, position: [1, 5]},
            {size: {x: 1, y: 1}, position: [2, 0]},
            {size: {x: 2, y: 1}, position: [2, 1]},
            {size: {x: 1, y: 1}, position: [2, 3]},
            {size: {x: 1, y: 1}, position: [2, 4]}
        ];
        $scope.gridsterOpts = {
            minRows: 2, // the minimum height of the grid, in rows
            maxRows: 100,
            columns: 6, // the width of the grid, in columns
            colWidth: 'auto', // can be an integer or 'auto'.  'auto' uses the pixel width of the element divided by 'columns'
            rowHeight: 'match', // can be an integer or 'match'.  Match uses the colWidth, giving you square widgets.
            outerMargin:false,
            margins: [10, 10], // the pixel distance between each widget
            defaultSizeX: 2, // the default width of a gridster item, if not specifed
            defaultSizeY: 1, // the default height of a gridster item, if not specified
            mobileBreakPoint: 600, // if the screen is not wider that this, remove the grid layout and stack the items
            resizable: {
                enabled: true,
                start: function (event, uiWidget, $element) {
                }, // optional callback fired when resize is started,
                resize: function (event, uiWidget, $element) {
                }, // optional callback fired when item is resized,
                stop: function (event, uiWidget, $element) {
                } // optional callback fired when item is...