Save state after binding html elements

Question

I created a question here at Sopt where my doubt was how to link HTML elements in a drag and drop.

The answer you have there is excellent and completely solved my doubt.

But now there is one more thing... How can I save the state of these linked Ivs? Because as it stands, if the user gives an F5 on the page, the Divs are unlinked...

How could I fix this?

Answer 1

Well, I don’t know if it’s best practice, but I thought I’d try and get a hit.

I made an example with the rescue in localStorage.

Among the data saved are:

• Position x and y of .panel;

• Position x and y of .div;

• Information to know if Ivs are linked or not;

And I created a button to unlink as well.

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>

This is a simple model, for simple applications, but it is functional and easy to adapt. I didn’t use the Jsfiddle or anything like that, because for some reason, it gives some bugs, so you can copy the code and test on your machine that works.