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"
    });
    console.log("ready");
})

$(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);
            }
        })            
            
    })

})