JSFiddle - React, Tailwind, and code Playground

by Raman Mandal

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.4/jquery.gridster.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.4/jquery.gridster.css">
<body>
    <div class='gridster'>
      <div data-row="1" data-col="1" data-sizex="1" data-sizey="1">
        <a id="one">drag or click me 1</a>
      </div>
      <div data-row="1" data-col="2" data-sizex="1" data-sizey="1">
        <a id="two">drag or click me 2</a>
      </div>
    </div>
</body>

CSS

.gridster {
    background: #eee;
}
a {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #eee;
    cursor: pointer;
    background: #fff;
}

JavaScript

$(document).ready(function () {
  $('#one').click(function() { alert('one'); });
  $('#two').click(function() { alert('two'); });
  // Basic jQuery handler to prevent event propagation
  var preventClick = function (e) { e.stopPropagation(); e.preventDefault(); };
  $('body > div').gridster({
    widget_margins: [10, 10],
    widget_base_dimensions: [140, 140],
    widget_selector: 'div',
    draggable: {
      start: function (event, ui) {
        // Stop event from propagating down the tree on the capture phase
        ui.$player[0].addEventListener('click', preventClick, true);
      },
      stop: function (event, ui) {
        var player = ui.$player;
        setTimeout(function () {
          player[0].removeEventListener('click', preventClick, true);
        });
      }
    }
  });
})