Save state after linking html elements

Well, I do not know if it's the best practice, but I decided to try it and I got it.

I made an example with saving in localStorage .

Among the saved data are:

• Position x and and of .panel ;

• Position x and and of .div ;

• Information to see if divs are linked or not;

And I created a button to unlink too.

Complete code:

<style type="text/css">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.panel{
  background: #ccc;
  width: 300px;
  height: auto;
}
.panel .panel-body {
  background: #fff;
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  height: 200px;
}
.hover{
  border: 2px dashed #333;
}
</style>

<script type="text/javascript">

$(document).ready(function() {

    var dropped = localStorage.getItem("dropped");


    var panelX = localStorage.getItem("panelX");
    var panelY = localStorage.getItem("panelY");
    var divX = localStorage.getItem("divX");
    var divY = localStorage.getItem("divY");

    $(document).bind('mouseup mousemove', function() {
        localStorage.setItem("panelX", parseFloat($('.panel').offset().left));
        localStorage.setItem("panelY", parseFloat($('.panel').offset().top));
        localStorage.setItem("divX", parseFloat($('.div').offset().left));
        localStorage.setItem("divY", parseFloat($('.div').offset().top));

        panelX = localStorage.getItem("panelX");
        panelY = localStorage.getItem("panelY");
        divX = localStorage.getItem("divX");
        divY = localStorage.getItem("divY");
    })

    var panelNormal = {
        background: '#ccc',
        width: '300px',
        height: 'auto'
    }
    var panelDropped = {
        background: 'red',
        height: 'auto',
        width: 'auto',
        display: 'inline-block'
    }


    var panelBodyNormal = {
        width: '100%',
        height: '200px'
    }
    var panelBodyDropped = {
        height: 'auto',
        width: 'auto',
        display: 'inline-block'
    }

    function dropDown() {

        $(".panel").draggable();
        $(".div").draggable();

        $(".panel").css(panelDropped);
        $(".panel .panel-body").css(panelBodyDropped);

        $('.div').draggable('destroy');

        $('.div').appendTo($("#panel .panel-body"));

        $('.div').css({
            position: "relative",
            left: 0,
            top: 0
        });

        localStorage.setItem("dropped", 'true');
    }

    if (!dropped || localStorage.getItem('dropped') == 'false') {

        $('.div').insertAfter(".panel");
        $(".panel").draggable();
        $(".div").draggable();
        $(".panel").droppable({
            accept: ".div",
            drop: dropDown,
            hoverClass: "hover"
        });

    } else if(localStorage.getItem('dropped') == 'true'){

        dropDown();

    }

    $('.panel').css({
        position: "absolute",
        left: panelX,
        top: panelY
    })
    if($('.div').parent().hasClass('panel-body') == false){
        $('.div').css({
            position: "absolute",
            left: divX,
            top: divY
        })
    }
    console.log($('.div').css("position"))

    $('#desvincular').click(function() {

        $('.div').insertAfter(".panel");
        $('.div').draggable();

        $(".panel").droppable({
            accept: ".div",
            drop: dropDown,
            hoverClass: "hover"
        });
        $(".panel").css(panelNormal);
        $(".panel .panel-body").css(panelBodyNormal);

        localStorage.setItem("dropped", 'false');
    })
})

</script>

<button id="desvincular" >Desvincular</button>

<div class="panel panel-success" id="panel">

  <div class="panel-heading">
    <h3 class="panel-title">Drop here!</h3>
  </div>

  <div class="panel-body"></div>

</div>

<div style="width:100px; height: 100px; background-color: black;" class="div"></div>

That's a simple model, for simple applications, but it's functional and easy to adapt. I did not use the Jsfiddle or anything, because for some reason, it gives a few bugs, so you can copy the code and test it on your machine that works.