Javascript 检测来自不同DOM元素的数据更改

TL；DR：从实际的

列表中检测项目更改并保存数据

大家好

我目前正在做一个基于Trello的web应用程序，使用PHP作为后端，使用jQueryUI作为前端

前端部件通过定义三个

UL

元件来制造。一个是id为

Nav

的容器/包装器，另外两个是存放物品的实际板

案例场景非常简单：

• 你可以重新订购电路板
• 您可以在单板内移动项目的顺序
• 您可以将项目从一块板移动到另一块板

所包含的代码支持这三种类型，但数据应该保存到后端数据库（我目前使用SQLite，因为项目处于早期阶段）

问题 方法

setSortAction

当前检测所有三个用例，但一旦将项目从一块板移动到另一块板，列表的顺序就无法正确检测（因为它们是递增的值）

像这样获取正文内容：

action=updateUItemlistings&record=2&record=1&record=3

通过将第二个项目移动到板中的第一个位置就可以了，我可以通过后端的POST请求，然后将更改保存到数据库中

当您将第一个项目从第一块板上的第二块板上移动时会发生什么情况？您将获得类似以下内容的bodyContent值：

action=updateNuitemListings&record=1&record=2&record=1&record=3

如您所见，值为

1

的记录重复

这意味着我无法检测到移动的项目是从第二块板，我有重复的项目，在董事会的顺序

你将如何着手设计这个？这可以通过给定的代码来完成吗？或者我是否完全错过了在这个场景中应该应用的逻辑

多谢各位

$（函数（）{
var-debugMode=true；
$（“ul.droptrue”）。可排序({
与“ul”连接
});
//为所有列表设置通用排序设置
$（“.sortable”）.sortable({
不透明度：0.6，
光标：“移动”
});
//用于为每个排序配置更新调用的函数
函数setSortAction（选择器、updatePage、updateAction、itemLabel）{
$（选择器）。可排序({
更新：函数（）{
var itemList=$（this）.sortable(
“序列化”{
属性：“id”，
关键字：itemLabel
});
//创建POST请求以持久化更新
var bodyContent=“action=“+updateAction+”&“+itemList；
如果（调试模式）{
警报（“调试：bodyContent=\n”+bodyContent）；
}
//$.post（更新页面、正文内容、函数（postResult）
//{警报（postResult）；}；
}
});
}
//为顶级和第二级设置排序更新操作
setSortAction（“.navLevel1”，
“reorder.php”，
“UpdateManulistings”，
“记录”）；
setSortAction（“.navLevel2”，
“reorder.php”，
“updateMenuItemListings”，
“记录”）；
});
@导入url（'https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css' );
#可排序的_1，
#可排序的_2，
#可排序的_3{
列表样式类型：无；
保证金：0；
浮动：左；
右边距：10px；
背景：#eee；
填充物：5px；
宽度：143px；
}
#可排序的_1 li，
#可排序的_2 li，
#可排序的_3 li{
保证金：5px；
填充物：5px；
字体大小：1.2米；
宽度：120px；
}
身体{
字体系列：Arial、Helvetica、无衬线字体；
}
桌子{
字号：1em；
}
.ui可拖动，
.ui可拖放{
背景位置：顶部；
}



类
一些类
另一个
是的，这就足够了


演示文稿
汤姆
杰西卡
Kevin



与类不同，HTML ID应该是唯一的，这样您就可以识别哪些项来自哪些列

例如，知道第一列有4个插槽，第二列有6个插槽意味着一个7,3,9,3,2,5,6,1,4,8,10的请求数组被拆分为4和6

第一栏：7，3，9，10
第二栏：2,5,6,1,4,8

$（函数（）{
var-debugMode=true；
$（“ul.droptrue”）。可排序({
与“ul”连接
});
//为所有列表设置通用排序设置
$（“.sortable”）.sortable({
不透明度：0.6，
光标：“移动”
});
//用于为每个排序配置更新调用的函数
函数setSortAction（选择器、updatePage、updateAction、itemLabel）{
$（选择器）。可排序({
更新：函数（）{
var itemList=$（this）.sortable(
“序列化”{
属性：“id”，
关键字：itemLabel
});
//创建POST请求以持久化更新
var bodyContent=“action=“+updateAction+”&“+itemList；
如果（调试模式）{
$（“#报告”）.text（“调试：bodyContent=\n”+bodyContent）；
}
//$.post（更新页面、正文内容、函数（postResult）
//{警报（postResult）；}；
}
});
}
//为顶级和第二级设置排序更新操作
setSortAction（“.navLevel1”，
“reorder.php”，
“UpdateManulistings”，
“记录”）；
setSortAction（“.navLevel2”，
“reorder.php”，
“updateMenuItemListings”，
“记录”）；
});
@导入url（'https://code.jquery.com/ui/1