JSFiddle - React, Tailwind, and code Playground

by braveminds1823

HTML

<!-- Adapted and improved from: https://jsfiddle.net/Logan_Wayne/ru1a3npc/ -->

<!-- Goal: 
1. Save the coordinate of each class draggable as JSON String
2. Load their coordinates from JSON string

*** Remark: I know changing the position to absolute helps, 
but my website is reponsive so the absolute layout will break out from the parent class if i rescale the page***

-->


<div id="containment-wrapper">
    <div id="1" class="ui-widget-content draggable" data-left="20px" data-top="20px" style="position: relative; left:20px; top:20px">Table</div>
    <div id="2" class="ui-widget-content draggable" data-left="97px" data-top="102px" style="position: relative; left: 97px; top:102px;">Chair</div>
    <div id="3" class="ui-widget-content draggable" data-left="98px" data-top="20px" style="position: relative; left:98px; top: 20px;">Couch</div>
    <div id="4" class="ui-widget-content draggable" data-left="176px" data-top="20px" style="position: relative; left: 176px; top:20px;">Window</div>
</div>

<button id="save">Save Position</button>

<button id="load">Load json</button><br>

Press save Position, copy this json String, paste the it into javascript line line 46 and then RUN the fiddle again
<div id="message"></div>

CSS

.draggable {
      width: 50px;
      height: 50px;
      padding: 0.5em;
      float: left;
      margin: 0 10px 10px 0;
      cursor:move;      
      margin-bottom:20px;
  }

  #containment-wrapper {
    margin-left: 200px;
      width: 500px;
      height: 500px;
      border:2px solid #ccc;
      padding: 10px;
  }
  h3 {
      clear: left;
  }

JavaScript

$(document).on("ready", function() {
  $(".draggable").each(function() {
    $(this).draggable({
      obstacle: ".butNotHere",
      preventCollision: true,
      containment: "#containment-wrapper",
      start: function(event, ui) {
        $(this).removeClass('butNotHere');
      },
      stop: function(event, ui) {
        $(this).addClass('butNotHere');
      }
    });
  });
});

$(document).on("mouseup", ".draggable", function() {
  var offsets = $(this).get(0).getBoundingClientRect();
  newtop = Math.round(offsets.top);
  newleft = Math.round(offsets.left);

  console.log("Javascript Line 22 - Absolute position in the page:" + '(Left: ' + newleft + '; Top:' + newtop + ')');
});

$(document).on("click", "#save", function() {
  var jsonStr = "[";

  $(".draggable").each(function() {
    var offsets = $(this).get(0).getBoundingClientRect();
    newtop = Math.round(offsets.top);
    newleft = Math.round(offsets.left);
    jsonStr += "{\"id\":\"" + $(this).attr('id') + "\",\"left\":\"" + newleft + "\",\"top\":\"" + newtop + "\"},";
  });

  jsonStr = jsonStr.slice(0, -1);
  jsonStr += "]";

  $("#message").text(jsonStr);

});



 $(document).on("click", "#load", function() {
  // Your json string here:
  var JSONstr = '[{"id":"1","left":"240","top":"-67"},{"id":"2","left":"395","top":"15"},{"id":"3","left":"474","top":"-67"},{"id":"4","left":"630","top":"-67"}]';

  $("#containment-wrapper").empty();

  const obj = JSON.parse(JSONstr);
  
  for (let i = 0; i < obj.length; i++) {
    var table = document.createElement('div');
    table.innerHTML = '<div class="draggable ui-widget-content" id="' + obj[i].id + '" style="position: relative; left:' + obj[i].left + 'px; top:' + obj[i].top + 'px">Div ' + obj[i].id + '</div>';

    $("#containment-wrapper").append(table);
  }
});