demo/right-to-left(rtl).html

<!DOCTYPE html>
<html lang="en" dir="rtl"> <!-- set text reading direction -->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Right-To-Left (RTL) demo</title>
  <style type="text/css">
    /* don't include demo.css as that has some forced text aligment */
    @import "../dist/gridstack.css";
    .grid-stack {
      background: #FAFAD2;
    }
    .grid-stack-item-content {
      background-color: #18bc9c;
    }
  </style>
  <script src="../dist/gridstack-all.js"></script>
</head>
<body>
  <h1>RTL Demo</h1>
  <div>
    <button onClick="addWidget()">Add Widget</button>
  </div>
  <br>
  <div class="grid-stack"></div>

  <script type="text/javascript">
    let items = [
      {x: 0, y: 0, w: 2, h: 1},
      {x: 2, y: 0, w: 4, h: 1},
      {x: 6, y: 0, w: 2, h: 2},
    ];
    items.forEach((item, i) => item.content = 'item ' + i);
    let grid = GridStack.init({rtl: true, children: items});

    function addWidget() {
      let w = {
        w: Math.round(1 + 3 * Math.random()),
        h: Math.round(1 + 3 * Math.random()),
        content: 'new item',
      };
      grid.addWidget(w);
    };

  </script>
</body>
</html>