检测来自不同DOM元素的数据更改 [英] Detect data change from different DOM element

查看：94
本文介绍了检测来自不同DOM元素的数据更改的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



你好吗？



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



前端部分使用 sortable（） ，通过定义三个 UL 元素。其中一个是容器/包装，其ID Nav ，另外两个是容纳物品的实际板子。



案例场景很简单：




  • 您可以重新订购电路板

  • 可以将物品在单板内移动

  • 您可以将物品从一块板移动到另一块板上



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



问题



方法 setSortAction 当前会检测全部三个用例但一次您将项目从一个板移动到另一个板，列表的顺序无法正确检测（因为它们的值是递增的）。

获取 bodyContent 像这样： action = updateMenuItemListings& record = 2& record = 1& record = 3

by m将第二个项目放到板子的第一个位置是可以的，我可以通过后端POST请求持久化，然后到数据库。



什么当你从第一块电路板上的第二块电路板移动第一个元件时，会发生什么？您将获得类似于以下内容的 bodyContent 的值：
action = updateMenuItemListings& record = 1& record = 2& record = 1& record = 3 $ b

您可以看到值 1 重复的记录。



这意味着我无法检测到移动来自第二块板子的物品，并且按照板子的顺序有重复项目。

你将如何去设计这个？

谢谢。
$是否可以通过给定的代码完成，或者我完全错过了应该在这种情况下应用的逻辑？

b $ b

+ bodyContent）; } //$.post(updatePage，bodyContent，function（postResult）// {alert（postResult）;}）; }}）; } //设置顶级和第二级别的排序更新操作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;保证金：0;向左飘浮; margin-right：10px;背景：#eee;填充：5px; ＃sortable_1 li，＃sortable_2 li，＃sortable_3 li {margin：5px;填充：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 =Navclass =sortable navLevel1> < ul id =sortable_1class =droptrue navLevel2> < li class =ui-state-disabledstyle =opacity：1; pointers-event：none; background：yellow> Classes< / li> < li id =item_1class =ui-state-default>某些课程< / li> < li id =item_2class =ui-state-default>另一个！< / li> < li id =item_3class =ui-state-default>是的，这就够了< / li> < / UL> < ul id =sortable_2class =droptrue navLevel2> < li class =ui-state-disabledstyle =opacity：1; pointers-event：none; background：yellow> Presentation< / li> < li id =item_1class =ui-state-default> Tom< / li> < li id =item_2class =ui-state-default> Jessica< / li> < li id =item_3class =ui-state-default> Kevin< / li> < / ul>< br style =clear：both>

解决方案

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



例如，知道第一列有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 

 < $ {$ c $>（function（）{var debugMode = true; $（ul.droptrue）。sortable（{connectWith：ul}）; //设置所有列表的常用排序设置$（。sortable ）.sortable（{opacity：0.6，cursor：'move'}）; //用于为每个排序函数配置更新调用的函数s etSortAction（selector，updatePage，updateAction，itemLabel）{$（selector）.sortable {{update：function（）{var itemList = $（this）.sortable（serialize，{attribute：id，key：itemLabel} ）; //创建POST请求以保持更新var bodyContent =action =+ updateAction +& + itemList; if（debugMode）{$（'＃report'）。text（DEBUG：bodyContent = \\\
+ bodyContent）; } //$.post(updatePage，bodyContent，function（postResult）// {alert（postResult）;}）; }}）; } //设置顶级和第二级别的排序更新操作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;保证金：0;向左飘浮; margin-right：10px;背景：#eee;填充：5px; ＃sortable_1 li，＃sortable_2 li，＃sortable_3 li {margin：5px;填充：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 ：固定的; font-size：0.5em;底部：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 =Navclass =sortable navLevel1> < ul id =sortable_1class =droptrue navLevel2> < li class =ui-state-disabledstyle =opacity：1; pointers-event：none; background：yellow> Classes< / li> < li id =item_1class =ui-state-default>某些课程< / li> < li id =item_2class =ui-state-default>另一个！< / li> < li id =item_3class =ui-state-default>是的，这就够了< / li> < / UL> < ul id =sortable_2class =droptrue navLevel2> < li class =ui-state-disabledstyle =opacity：1; pointers-event：none; background：yellow> Presentation< / li> < li id =item_4class =ui-state-default> Tom< / li> < li id =item_5class =ui-state-default> Jessica< / li> < li id =item_6class =ui-state-default> Kevin< / li> < / ul>< div id =report>< / div>< br style =clear：both>


TL;DR: Detect item change from the actual <ul> list and persist the data

Howdy everyone?

I'm currently doing a Trello-like based web-application using PHP as a backend and jQueryUI as a front-end.

The front-end part is made using sortable(), by defining three UL elements. One is a container / wrapper with the id Nav and the other two are actual boards that hold the items.

Case scenarios are simple:

  • You can reorder boards
  • You can move order of items inside the single board
  • You can move item from one board to another

The included code supports all three of them but the data should persist to the back-end powered database (I'm currently on SQLite since the project is in early phase).

Problem

The method setSortAction currently detects all three use case but once you move the item from one board to another the order of the list can't be properly detected (since they are in incremented value).

Getting the bodyContent like this: action=updateMenuItemListings&record=2&record=1&record=3
by moving the second item to the first place in the board is fine, and I can persist that change through the POST request on back-end and then onto the database.

What happens when you move the first item from the second board on the first board? You'd get value of bodyContent similar to this: action=updateMenuItemListings&record=1&record=2&record=1&record=3

As you can see the record with value 1 duplicates.

That means I can't detect the item moved is from the second board and I have duplicate items in the order of the board.

How would you go about designing this? Can it be done by the given code or have I totally missed the logic that one should apply in this scenario?

Thank you.

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

解决方案

Unlike classes HTML ID's should be unique, in this way you can identify which items are from which columns.

Knowing for example that column one has 4 slots and column two has 6 would mean that a request array of 7,3,9,3,2,5,6,1,4,8,10 gets split into 4 and 6 hence

  1. Column one: 7, 3, 9, 10,
  2. Column two: 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">

这篇关于检测来自不同DOM元素的数据更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆