jQuery UIポートレットデータベース上の状態を保存

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> 

スタイリング：

<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> 

スクリプトとスタイルシート：

<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のご協力をお願いいたします。

ユーザーがドラッグとカテゴリー1からカテゴリー2に要素をドロップするたびに、それがデータベースに更新する必要があります。以下は、現在の状態のスクリーンショットです。

Answer 1

AJAXリクエストをポートレットupdateに渡す必要があります。 API Documentationの詳細。

Answer 2

私は実際にあなたの質問を理解していない、あるいはあなたが州を意味するものさえありますが、暗闇の中で撮影し、各ボックスの位置を列に対して保存する。

各列に名前と番号があり、各ボックスにランクが付くように設定します。

はあなたを言う：

だから、初期化またはランク（インフィニティに0を）持っているだろうに変更し、それは親、列だいずれか各ボックスには、名前

クイック例を持っているでしょうニュースボックスを最初のカテゴリからショッピングボックスの下の2番目のカテゴリに移動します。
初めて見ると、ニュースは['First', 1]と表示されます。スイッチの後には['Second', 1]になります。