使用可排序列表插入和更新数据库答案

【问题标题】：Inserting and updating database using sortable list使用可排序列表插入和更新数据库
【发布时间】：2012-12-05 16:11:21
【问题描述】：

有许多使用 jQuery 可排序列表更新数据库的示例，其中涉及序列化列表的id，然后根据该id 序列更新数据库。

现在的问题是我想使用 jQuery 可排序连接列表来插入和更新数据库。我有两个列表。

来源列表：

<ul id="admin_news_all">
    <li id="2588" class="ui-draggable">
    <li id="2678" class="ui-draggable">
    <li id="2680" class="ui-draggable">
    <li id="2690" class="ui-draggable">
    <li id="2692" class="ui-draggable">
    <li id="2694" class="ui-draggable">
    <li id="2696" class="ui-draggable">
    <li id="2698" class="ui-draggable">
    <li iid="2696" class="ui-draggable">
    <li id="2704" class="ui-draggable">
</ul>

目标列表：

<ul id="news_box_top" class="ui-sortable">
    <li class="ui-draggable" style="display: list-item; id="2686"">
    <li class="ui-draggable" style="display: list-item; id="2496"">
</ul>

我已将 jQuery 初始化为：

$("#news_box_top").sortable()
$("#admin_news_all li").draggable({
    helper: "clone",
    revert: "invalid",
    connectToSortable:'#news_box_top'
});

现在我想将项目从源列表移动到目标列表，然后在单击 button 元素时更改（插入和更新操作）数据库。

目标数据库：MySql

id int(12), position int(2)

【问题讨论】：

标签： jquery mysql jquery-ui-sortable

【解决方案1】：

首先，我认为您的第二个列表应该是这样的：

<ul id="news_box_top" class="ui-sortable">
  <li class="ui-draggable" id="2686" style="display: list-item; ">
  <li class="ui-draggable" id="2496" style="display: list-item; ">
</ul>

然后我假设你知道如何更新你的数据库，我只是帮助构建一个带有排序 id 的数组：

ids = [];
$('#news_box_top li.ui-draggable').toArray().forEach( function (el) {
  // Here I assume the element has an id
  ids.push( $(el).attr('id') );
});

【讨论】：