如何在可嵌套列表中删除元素答案

【问题标题】：How to get element dropped on Nestable List如何在可嵌套列表中删除元素
【发布时间】：2017-03-02 12:20:08
【问题描述】：

我正在使用嵌套列表进行版本访问，当我将项目从 List1 拖放到 List2 时，我必须保存在数据库中，那么我如何确定在 List2 上拖放了什么项目？

这是我的代码：

        <div class="col-lg-6">
            <h3 class="droppTextCenter">Serviços Disponíveis</h3>
            <div class="dd" id="nestable">
                <script id="template" type="text/template7">
                    <ol class="dd-list">
                        {{#each Services}}
                        <li class="dd-item" data-id="{{Id}}">
                            <div class="dd-handle">
                                <div class="col-lg-9">
                                    {{Descryption}}
                                </div>
                            </div>
                        </li>
                        {{/each}}
                    </ol>
                </script>
            </div>
        </div>
        <div class="col-lg-6">
            <h3 class="droppTextCenter">Serviços Liberados para o Usuário</h3>
            <div class="dd" id="nestable2">
                <script id="template2" type="text/template7">
                    <ol class="dd-list">
                        {{#each ServicesReleased}}
                        <li class="dd-item" data-id="{{Id}}">
                            <div class="dd-handle">
                                <div class="col-lg-9">
                                    {{Descryption}}
                                </div>
                            </div>
                        </li>
                        {{/each}}
                    </ol>
                </script>
            </div>
        </div>

我正在使用 template7 来制作列表。

所以我将在可嵌套的 onChange 上创建一个 ajax 方法以将其保存在数据库中。

$('#nestable').nestable({
    maxDepth: 1,
    group: 1
}).on('change', updateOutput);

// activate Nestable for list 2
$('#nestable2').nestable({
    maxDepth: 1,
    group: 1
}).on('change', updateOutput);

这个将替代updateOutput。当我将它从 List1 移动到 List2 时，我必须保存在数据库中，但是当我从 List2 移动到 List1 时，我必须将其从数据库中删除。

function saveServicosLiberados() {
    $.ajax({
        url: "/Admin/MeusNegociosAcessos/SaveServicosLiberados",
        method: "POST",
        data: {
            Id: ????????
        },
        success: function (result) {
            var list = e.length ? e : $(e.target), output = list.data('output');

            if (window.JSON) {
                output.val(window.JSON.stringify(list.nestable('serialize')));
            } else {
                output.val('É necessario estár com um nevegador com suporte à JSON.');
            }
        }
    });
}

function deleteServicosLiberados() {
    $.ajax({
        url: "/Admin/Delete",
        method: "POST",
        data: {
            Id: ??????????
        },
        success: function (result) {
            var list = e.length ? e : $(e.target), output = list.data('output');

            if (window.JSON) {
                output.val(window.JSON.stringify(list.nestable('serialize')));
            } else {
                output.val('É necessario estár com um nevegador com suporte à JSON.');
            }
        }
    });
}

那么，我如何从掉落的物品中获取 ID？

【问题讨论】：

标签： javascript c# jquery jquery-nestable

【解决方案1】：

这是一个很难解决的问题（如果我解决了……你告诉我）。

FIRST 我把Template7 的困难放在一边。
我正在Notepad++ 中手动编码。
无论如何，这种 HTML 预处理器语法与问题的真正主题无关。

问题是如何使用 Nestable plugin 将列表项“移动”从一个列表保存到另一个列表，顺便说一句，自 2014 年 8 月以来就不再维护。
所以我给你做了两个例子。

One 显示了在哪里挂钩 ajax 请求以保存从左侧列表中拖出或拖到的元素 id。
Second正在显示在哪里挂钩 ajax 请求以在更改时保存一个或两个列表。

我绝对没有碰插件代码...
它似乎运行良好。

此外，您的问题是关于如何使用它的结果。
所以我从this GitHub example开始，而不是你的代码。

我找到了可以获取相关信息以便将其保存到数据库的位置。

所以看看两支钢笔。
并问我是否有不清楚的地方。
;)

我已留下所有相关的 console.log() 以帮助了解发生了什么。

有趣的（？） 轶事：我今天失去了 3 个小时，在 GitHub 等待从 Dyn 上的 DDoS 攻击 中复活，然后发布此答案。事情发生了！ ;)

【讨论】：