jQuery Пользовательский порт портлета Сохранить состояние в базе данных

Question

Мы можем перетаскивать элементы с помощью jQuery UI sortable - Portlets. Я хочу сохранить состояние в базе данных MySQL. В любом случае (возможно, AJAX) сделать это?

Мой HTML:

<div class="column" id = "column-1"> 
First Category 

    <div class="portlet"> 
    <div class="portlet-header">Feeds</div> 
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
    </div> 

    <div class="portlet"> 
    <div class="portlet-header">News</div> 
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
    </div> 

</div> 

<div class="column" id = "column-2"> 
Second Category 

    <div class="portlet"> 
    <div class="portlet-header">Shopping</div> 
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
    </div> 

</div> 

<div class="column" id = "column-3"> 
Third Category 

    <div class="portlet"> 
    <div class="portlet-header">Shopping</div> 
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
    </div> 

    <div class="portlet"> 
    <div class="portlet-header">Shopping</div> 
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
    </div> 

</div> 

<div class="column" id = "column-4"> 
Fourth Category 

    <div class="portlet"> 
    <div class="portlet-header">Links</div> 
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
    </div> 

    <div class="portlet"> 
    <div class="portlet-header">Images</div> 
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
    </div> 

</div> 

Мой JavaScript:

<script> 
    $(function() { 
    $(".column").sortable({ 
     connectWith: ".column", 
     handle: ".portlet-header", 
     cancel: ".portlet-toggle", 
     placeholder: "portlet-placeholder ui-corner-all" 
    }); 

    $(".portlet") 
     .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") 
     .find(".portlet-header") 
     .addClass("ui-widget-header ui-corner-all") 
     .prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>"); 

    $(".portlet-toggle").on("click", function() { 
     var icon = $(this); 
     icon.toggleClass("ui-icon-minusthick ui-icon-plusthick"); 
     icon.closest(".portlet").find(".portlet-content").toggle(); 
    }); 
    }); 
    </script> 

Styling:

<style> 
    body { 
    min-width: 520px; 
    } 
    .column { 
    width: 170px; 
    float: left; 
    padding-bottom: 100px; 
    } 
    .portlet { 
    margin: 0 1em 1em 0; 
    padding: 0.3em; 
    } 
    .portlet-header { 
    padding: 0.2em 0.3em; 
    margin-bottom: 0.5em; 
    position: relative; 
    } 
    .portlet-toggle { 
    position: absolute; 
    top: 50%; 
    right: 0; 
    margin-top: -8px; 
    } 
    .portlet-content { 
    padding: 0.4em; 
    } 
    .portlet-placeholder { 
    border: 1px dotted black; 
    margin: 0 1em 1em 0; 
    height: 50px; 
    } 
    </style> 

Сценарии и Stylesheets:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

Любая помощь будет оценена для PHP. Ниже приведен скриншот текущего состояния:

Всякий раз, когда пользователь перетаскивает элемент из первой категории к второй категории, она должна быть обновлена ​​в базе данных.

Answer 1

Необходимо передать AJAX запрос на портлет update. Подробности на API Documentation.

Answer 2

Я действительно не понимаю ваш вопрос или даже то, что вы подразумеваете под штатами, но я сделаю снимок в темноте и предположим, что вы хотите сохранить позицию каждой ячейки относительно столбцов ,

Я бы установил его так, чтобы каждый столбец имел имя/номер, и каждый ящик имеет ранг.

Таким образом, каждая коробка, когда либо инициализации или изменения будут иметь ранг (от 0 до Инфинити), и его родителей, столбец, будет иметь имя

Быстрый пример:

Допустим, вы переместите окно новостей из первой категории во вторую категорию в поле для покупок.
Когда вы впервые посмотрите на это, новости будут обозначены как ['First', 1]. После переключения это будет ['Second', 1].