JSFiddle - React, Tailwind, and code Playground

by Shrikrishna Gupta

HTML

<h3>TEST ME BELOW:</h3>

<div id="containment-wrapper">
    <div id="draggable3" class="draggable ui-widget-content">
        <p>DRAG ME</p>
    </div>

CSS

.draggable {
      width: 90px;
      height: 90px;
      padding: 0.5em;
      float: left;
      margin: 0 10px 10px 0;
  }
  
  #draggable, #draggable2 {
      margin-bottom:20px;
  }
  
  #draggable {
      cursor: n-resize;
  }
  #draggable3 {
      cursor: move;
  }
  #containment-wrapper {
      width: 700px;
      height:500px;
      border:1px solid #000;
      padding: 5px;
  }
  h3 {
      clear: left;
  }

JavaScript

var sPositions = localStorage.positions || "{}",
  positions = JSON.parse(sPositions);
$.each(positions, function(id, pos) {
  $("#" + id).css(pos)
})
$("#draggable3").draggable({
  containment: "#containment-wrapper",
  scroll: false,
  stop: function(event, ui) {
    positions[this.id] = ui.position;
    localStorage.positions = JSON.stringify(positions)
    console.log(JSON.stringify(positions));
  }
});