Make draggable panels 'sticky' when moved using WinMove

Question

so I'm having issues with figuring out how to make the webpage remember where you moved the draggable panels so they are in the same place where you last placed them. Currently you can move the panels where ever you want using the WinMove() function, but once you leave the page the panels will go back to their original place before you moved them.

// Dragable panels
function WinMove() {
    var element = "[class*=col]";
    var handle = ".ibox-title";
    var connect = "[class*=col]";
    $(element).sortable(
        {
            handle: handle,
             connectWith: connect,
             tolerance: 'pointer',
             forcePlaceholderSize: true,
             opacity: 0.8
        })
        .disableSelection();
}

Answer 1

You will need to store the new location coordinates data somewhere, usually in a back-end database like MySQL. Otherwise, there is no way for the page to remember where the elements were repositioned to.

Usually, we would use AJAX to discreetly send a message to a server-side script (e.g. a PHP file), and that back-end code would plop the new values into a database. Then, when the page is being created, your code would consult the database and assign the location coordinates. Of course, this means that the location coords must be stored in the database from the get-go.

Here are some posts that show simple examples of how to use AJAX:

AJAX request callback using jQuery

---

A very rough example of code for your situation would look something like this:

// Dragable panels
function WinMove() {
    var element = "[class*=col]";
    var handle = ".ibox-title";
    var connect = "[class*=col]";
    $(element).sortable(
        {
            handle: handle,
             connectWith: connect,
             tolerance: 'pointer',
             forcePlaceholderSize: true,
             opacity: 0.8
        })
        .disableSelection();
        var top = //get coords, something like: $('#yr_element').position().top;
        var left = //get coords, something like: $('#yr_element').position().left;
        $.ajax({
            type: 'post',
             url: 'your_backend_php_file.php',
            data: 'top='+top+ '&left=' +left,
            success: function(d){
                if (d.length) alert(d);
            }
        });
}

your_backend_php_file.php:

<?php
    $top = $_POST['top'];
    $left = $_POST['left'];

    //store values in your mysql database, by user