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" style="left:20px; top:20px">Table</div>
    <div id="2" class="ui-widget-content draggable" style="left: 97px; top:102px;">Chair</div>
    <div id="3" class="ui-widget-content draggable"  style="left:98px; top: 20px;">Couch</div>
    <div id="4" class="ui-widget-content draggable"  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-top: 500px;
    margin-left: 50px;
      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() {
    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":"10","top":"10"},{"id":"2","left":"432","top":"422"},{"id":"3","left":"10","top":"422"},{"id":"4","left":"432","top":"10"}]';

  $("#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 butNotHere" id="' + obj[i].id + '" style="left:' + obj[i].left + 'px; top:' + obj[i].top + 'px">Div ' + obj[i].id + '</div>';

   ...