Detect Data Change From Different Dom Element

TL;DR: Detect item change from the actual

list and persist the data Howdy everyone? I'm currently doing a Trello-like based web-application using PHP as a backend and j

Solution 1:

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 sortfunctionsetSortAction(selector, updatePage, updateAction, itemLabel) {
    $(selector).sortable({
      update: function() {
        var itemList = $(this).sortable(
          "serialize", {
            attribute: "id",
            key: itemLabel
          });

        //Create POST request to persist the updatevar 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 levelsetSortAction(".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_1li,
#sortable_2li,
#sortable_3li {
  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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><ulid="Nav"class="sortable navLevel1"><ulid="sortable_1"class="droptrue navLevel2"><liclass="ui-state-disabled"style="opacity: 1; pointers-event: none; background: yellow">Classes</li><liid="item_1"class="ui-state-default">Some class</li><liid="item_2"class="ui-state-default">Another one!</li><liid="item_3"class="ui-state-default">Yep, thats enough</li></ul><ulid="sortable_2"class="droptrue navLevel2"><liclass="ui-state-disabled"style="opacity: 1; pointers-event: none; background: yellow">Presentation</li><liid="item_4"class="ui-state-default">Tom</li><liid="item_5"class="ui-state-default">Jessica</li><liid="item_6"class="ui-state-default">Kevin</li></ul></ul><divid="report"></div><brstyle="clear:both">