Javascript jQuery UI Portlet在数据库上保存状态

我们可以使用拖放元素。我想将状态保存到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>

第一类
喂养
Lorem ipsum dolor sit amet，一位杰出的领导者
新闻
Lorem ipsum dolor sit amet，一位杰出的领导者
第二类
购物
Lorem ipsum dolor sit amet，一位杰出的领导者
第三类
购物
Lorem ipsum dolor sit amet，一位杰出的领导者
购物
Lorem ipsum dolor sit amet，一位杰出的领导者
第四类
链接
Lorem ipsum dolor sit amet，一位杰出的领导者
图像
Lorem ipsum dolor sit amet，一位杰出的领导者

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

$（函数（）{
$（“.column”）.sortable({
连接到：“.column”，
句柄：“.portlet头”，
取消：“.portlet切换”，
占位符：“portlet占位符ui角点全部”
});
$（“.portlet”）
.addClass（“ui小部件ui小部件内容ui帮助程序clearfix ui角点全部”）
.find（“.portlet头”）
.addClass（“ui小部件标题ui角点全部”）
.prepend（“”）；
$（“.portlet切换”）。打开（“单击”，函数（）{
var icon=$（这个）；
toggleClass（“ui图标+ui图标+图标图标”）；
icon.closest（“.portlet”）.find（“.portlet内容”）.toggle（）；
});
} );

样式：

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

身体{
最小宽度：520px；
}
.栏目{
宽度：170px；
浮动：左；
填充底部：100px；
}
.portlet{
利润率：0.1米1米0；
填充：0.3em；
}
.portlet头{
填充：0.2em 0.3em；
边缘底部：0.5em；
位置：相对位置；
}
.portlet切换{
位置：绝对位置；
最高：50%；
右：0；
利润上限：-8px；
}
.portlet内容{
填充：0.4em；
}
.portlet占位符{
边框：1px点黑色；
利润率：0.1米1米0；
高度：50px；
}

脚本和样式表：

<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有任何帮助，我们将不胜感激。以下是当前状态的屏幕截图：

---

每当用户将元素从第一类拖放到第二类时，它都应该在数据库中更新。

我真的不理解你的问题，甚至不理解你所说的状态是什么，但我将在黑暗中拍摄，假设您的意思是希望保存每个框相对于列的位置

我会设置它，使每个列都有一个名称/编号，每个框都有一个等级

因此，无论是初始化还是更改，每个框都有一个秩（0到无穷大），它的父项列都有一个名称

快速示例：

假设您将新闻框从第一个类别移动到购物框下的第二个类别。

---

当您第一次看到它时，新闻将被指定为

['first'，1]

。在切换之后，它将是

['Second'，1]

您需要在portlet

update

上传递

AJAX

请求。详细说明。

以及它在JavaScript中的具体使用方式？使用Ajax发布一篇文章，以JSON的形式发送位置数据。