检测来自不同DOM元素

时间：2017-01-27 14:55:16

标签： javascript jquery html css jquery-ui

TL; DR ：检测实际<ul>列表中的项目更改并保留数据

大家好吗？

我目前正在使用基于PHP的后端和jQueryUI作为前端，使用类似Trello的Web应用程序。

通过定义三个UL元素，使用sortable()制作前端部分。一个是容器/包装器，标识为Nav，另外两个是包含物品的实际板。

案例场景很简单：

  • 您可以重新订购电路板
  • 您可以移动单板内的物品订单
  • 您可以将项目从一个板移动到另一个板

包含的代码支持所有这三个，但数据应该保留在后端驱动的数据库中（我目前在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">

1 个答案:

答案 0 :(得分：0)

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

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

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

    3. $(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">

相关问题
最新问题