title: How can I order my draggable & droppable nestable menu?
body: <p>My question is about ordering nestable menu.</p>
  
  <p>I have been developing dynamic menu with draggable &amp; droppable nestable menu. When I drag an item, I can successfully save it into my database in <strong>onDragFinished</strong> function. In addition, I managed to reach <strong>parentId</strong> and <strong>childId</strong>.</p>
  
  <p>My problem is that I can not reach order number of items. I tried too many ways, but I could not be successful.</p>
  
  <p>I should send the order number of items to my controller via Ajax.</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function () {
          $('#nestable').nestable({
              onDragFinished: function (currentNode, parentNode)  //parentId and childId
              { //Ajax
                  var type = parseInt($(currentNode).data('id'));
                  var type2 = parseInt($(parentNode).data('id'));
                  console.log(type);
                  console.log(type2);
                  $.ajax({
                      method: "POST",
                      url: '@Url.Action("ChangeNodePosition","Pages")',
                      data: {
                          currentNode: type,
                          parentNode: type2
                      },
                      success: function (result) {
                          if (result == true)
                          {
                              alert("Save changes are successful");
                          }
                      }
                  }).fail(function (jqXHR, textStatus, errorThrown) {
                      alert("Unable to save new list order: " + jqXHR.responseText);
                  });
  
              }
          });
  
          $('#nestable-menu').on('click', function (e) {
              var target = $(e.target),
                  action = target.data('action');
              if (action === 'expand-all') {
                  $('.dd').nestable('expandAll');
              }
              if (action === 'collapse-all') {
                  $('.dd').nestable('collapseAll');
              }
          });
  
          $('#draggable_list').change(function () {
              $('#nestable').toggleClass('drag_disabled drag_enabled');
          });
          $('#nestable').nestable('collapseAll');
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>This is my <strong>DragStop</strong> function,</p>
  
  <pre><code>   dragStop: function (e) {
              var list = this;
              var el = this.dragEl.children(this.options.itemNodeName).first();
              el[0].parentNode.removeChild(el[0]);
              this.placeEl.replaceWith(el);
  
              this.dragEl.remove();
  
              var $parents = $(el[0]).parents('.' + list.options.itemClass);
              var $parent = null;
              if ($parents.length &gt; 0) $parent = $parents[0];
              list.options.onDragFinished(el[0], $parent);
              this.el.trigger('change');
              if (this.hasNewRoot) {
                  this.dragRootEl.trigger('change');
              }
              this.reset();
          }
  </code></pre>
  
  <p>Finally, this is my controller,</p>
  
  <pre><code> [HttpPost]
          public JsonResult ChangeNodePosition(int currentNode, int? parentNode) //order number getireceğiz
          {
              Menu location = _menuService.GetByMenuId(currentNode);
              if (parentNode == null)
              {
                  location.OrderNumber = location.OrderNumber + 1;
                  location.ParentID = null;
                  _menuService.Update(location);
              }
              else
              {
                  location.OrderNumber = location.OrderNumber + 1;
                  location.ParentID = parentNode;
                  _menuService.Update(location);
              }
              return this.Json(true);
          }
  </code></pre>