如何订购可拖动和可放置的嵌套菜单?

时间:2018-08-28 15:05:05

标签: javascript jquery css asp.net-mvc jquery-nestable

我的问题是关于订购可嵌套菜单。

我一直在开发具有可拖动和可放置的嵌套菜单的动态菜单。拖动项目时,可以通过 onDragFinished 函数将其成功保存到数据库中。另外,我设法达到了 parentId childId

我的问题是我无法达到订单数量。我尝试了太多方法,但未能成功。

我应该通过Ajax将订单的订单号发送给我的控制器。

<script>
    $(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');

    });
</script>

这是我的 DragStop 功能

   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 > 0) $parent = $parents[0];
            list.options.onDragFinished(el[0], $parent);
            this.el.trigger('change');
            if (this.hasNewRoot) {
                this.dragRootEl.trigger('change');
            }
            this.reset();
        }

最后,这是我的控制器,

 [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);
        }

0 个答案:

没有答案