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

<div id="message" style="display:none"><h1>Saved!</h1></div>

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

CSS

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

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

JavaScript

$(document).on("ready", function() {
  $(".draggable").draggable({
    containment: "#containment-wrapper"
  });
})

$(document).on("mouseup", ".draggable", function() {

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

  console.log('Left: ' + pos.left + '; Top:' + pos.top);

});

$(document).on("ready", "#save", function() {

  $(".draggable").each(function() {
    var elem = $(this),
      id = elem.attr('id');
    newleft = elem.attr('data-left'),
      newtop = elem.attr('data-top');

    $.ajax({
      type: 'POST',
      url: 'save-position.php',
      data: {
        'id': id,
        'newleft': newleft,
        'newtop': newtop
      },
      success: function(result) {
        $("#message").show(200);
      }
    })

  })

})