javascript - 检测来自不同 DOM 元素的数据变化

Question

TL;DR:从实际 <ul> 中检测元素更改列出并持久化数据

大家好吗？

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

前端部分使用 sortable() 制作, 通过定义三个 UL元素。一个是 ID 为 Nav 的容器/包装器另外两个是实际放置元素的木板。

案例场景很简单:

• 您可以重新排序看板
• 您可以在单板内移动元素的顺序
• 您可以将元素从一个版 block 移动到另一个版 block

包含的代码支持所有这三个，但数据应该持久保存到后端驱动的数据库中(我目前使用 SQLite，因为该元素处于早期阶段)。

问题

方法setSortAction目前检测到所有三个用例但是一旦您将元素从一个板移动到另一个板，列表的顺序就无法正确检测(因为它们是增量值)。

像这样获取bodyContent:action=updateMenuItemListings&record=2&record=1&record=3
将第二个元素移到面板中的第一个位置就可以了，我可以通过后端的 POST 请求保留该更改，然后保存到数据库中。

当您将第一个元素从第二个板上移到第一个板上时会发生什么？您将获得类似于此的 bodyContent 值: action=updateMenuItemListings&record=1&record=2&record=1&record=3

如您所见，记录值为 1重复。

这意味着我无法检测到移动的元素来自第二个板，并且我在板的顺序中有重复的元素。

你会如何设计这个？可以通过给定的代码来完成，还是我完全错过了在这种情况下应该应用的逻辑？

谢谢。

$(function() {

  var debugMode = true;

  $("ul.droptrue").sortable({
    connectWith: "ul"
  });

  //Set common sort settings for all lists
  $(".sortable").sortable({
    opacity: 0.6,
    cursor: 'move'
  });

  //Function used to configure update calls for each sort
  function setSortAction(selector, updatePage, updateAction, itemLabel) {
    $(selector).sortable({
      update: function() {
        var itemList = $(this).sortable(
          "serialize", {
            attribute: "id",
            key: itemLabel
          });

        //Create POST request to persist the update
        var bodyContent = "action=" + updateAction + "&" + itemList;
        if (debugMode) {
          alert("DEBUG: bodyContent = \n" + bodyContent);
        }

        //$.post(updatePage, bodyContent, function (postResult)
        //{ alert(postResult); });
      }
    });
  }

  //Set sort update action for top level and second level
  setSortAction(".navLevel1",
    "reorder.php",
    "updateMenuListings",
    "record");

  setSortAction(".navLevel2",
    "reorder.php",
    "updateMenuItemListings",
    "record");
});

@import url( 'https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css' );

#sortable_1,
#sortable_2,
#sortable_3 {
  list-style-type: none;
  margin: 0;
  float: left;
  margin-right: 10px;
  background: #eee;
  padding: 5px;
  width: 143px;
}

#sortable_1 li,
#sortable_2 li,
#sortable_3 li {
  margin: 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

table {
  font-size: 1em;
}

.ui-draggable,
.ui-droppable {
  background-position: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul id="Nav" class="sortable navLevel1">

  <ul id="sortable_1" class="droptrue navLevel2">

    <li class="ui-state-disabled" style="opacity: 1; pointers-event: none; background: yellow">Classes</li>
    <li id="item_1" class="ui-state-default">Some class</li>
    <li id="item_2" class="ui-state-default">Another one!</li>
    <li id="item_3" class="ui-state-default">Yep, thats enough</li>

  </ul>

  <ul id="sortable_2" class="droptrue navLevel2">

    <li class="ui-state-disabled" style="opacity: 1; pointers-event: none; background: yellow">Presentation</li>
    <li id="item_1" class="ui-state-default">Tom</li>
    <li id="item_2" class="ui-state-default">Jessica</li>
    <li id="item_3" class="ui-state-default">Kevin</li>

  </ul>
</ul>

<br style="clear:both">

Answer 1

与类 HTML ID 不同，通过这种方式您可以识别哪些元素来自哪些列。

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

1. 第一列:7、3、9、10，
2. 第二列:2、5、6、1、4、8

$(function() {

  var debugMode = true;

  $("ul.droptrue").sortable({
    connectWith: "ul"
  });

  //Set common sort settings for all lists
  $(".sortable").sortable({
    opacity: 0.6,
    cursor: 'move'
  });

  //Function used to configure update calls for each sort
  function setSortAction(selector, updatePage, updateAction, itemLabel) {
    $(selector).sortable({
      update: function() {
        var itemList = $(this).sortable(
          "serialize", {
            attribute: "id",
            key: itemLabel
          });

        //Create POST request to persist the update
        var bodyContent = "action=" + updateAction + "&" + itemList;
        if (debugMode) {
          $('#report').text("DEBUG: bodyContent = \n" + bodyContent);
        }

        //$.post(updatePage, bodyContent, function (postResult)
        //{ alert(postResult); });
      }
    });
  }

  //Set sort update action for top level and second level
  setSortAction(".navLevel1",
    "reorder.php",
    "updateMenuListings",
    "record");

  setSortAction(".navLevel2",
    "reorder.php",
    "updateMenuItemListings",
    "record");
});

@import url( 'https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css' );

#sortable_1,
#sortable_2,
#sortable_3 {
  list-style-type: none;
  margin: 0;
  float: left;
  margin-right: 10px;
  background: #eee;
  padding: 5px;
  width: 143px;
}

#sortable_1 li,
#sortable_2 li,
#sortable_3 li {
  margin: 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

table {
  font-size: 1em;
}

.ui-draggable,
.ui-droppable {
  background-position: top;
}

#report {
 position: fixed;
 font-size: 0.5em;
 bottom: 2em;
 left: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul id="Nav" class="sortable navLevel1">

  <ul id="sortable_1" class="droptrue navLevel2">

    <li class="ui-state-disabled" style="opacity: 1; pointers-event: none; background: yellow">Classes</li>
    <li id="item_1" class="ui-state-default">Some class</li>
    <li id="item_2" class="ui-state-default">Another one!</li>
    <li id="item_3" class="ui-state-default">Yep, thats enough</li>

  </ul>

  <ul id="sortable_2" class="droptrue navLevel2">

    <li class="ui-state-disabled" style="opacity: 1; pointers-event: none; background: yellow">Presentation</li>
    <li id="item_4" class="ui-state-default">Tom</li>
    <li id="item_5" class="ui-state-default">Jessica</li>
    <li id="item_6" class="ui-state-default">Kevin</li>

  </ul>
</ul>

<div id="report"></div>
<br style="clear:both">