Drag div and save the position

User can drag divs and hit the "Save Position" button to save this position to the database

by braveminds1823

HTML

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

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

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

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

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;
      position:absolute;
  }

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

JavaScript

function setupDraggable() {
  $(".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');
      }
    });
  });
}
setupDraggable();

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

    var elem = $(this),
        id = elem.attr('id'),
        desc = elem.attr('data-desc'),
        pos = elem.position();

newleft = pos.left;
newtop = pos.top;

  console.log("Javascript Line 24 - 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); */
    
        var elem = $(this),
        id = elem.attr('id'),
        desc = elem.attr('data-desc'),
        pos = elem.position();

newleft = pos.left;
newtop = pos.top;
    
    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":"9.999997500000006","top":"9.9999975"},{"id":"2","left":"432.98827875","top":"422.98827875"},{"id":"3","left":"432.98827875","top":"9.9999975"},{"id":"4","left":"9.999997500000006","top":"423.9843725"}]';

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

  const obj = JSON.parse(JSONstr);
  
  for (let i = 0; i < obj.length; i++) {
    var table =...