javascript - 如何将元素放在可嵌套列表中

Question

我正在使用 Nestable List 进行发布访问， 当我将项目从 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？

Answer 1

这是一个很难解决的问题(如果我解决了......你来告诉我)。

首先 我把Template7抛开困难。
我在 Notepad++ 中手工编码在这里。
无论如何，此 HTML 预处理器语法与问题的实际主题无关。

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

One正在显示在哪里 Hook ajax 请求以保存元素 id 从或拖到 左侧列表。
Second正在显示在何处 Hook ajax 请求以保存一个或两个列表发生变化。

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

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

我找到了可以从哪里获取相关信息以便将其保存到数据库。

那么看看这两款 Pen。
有什么不明白的地方问我。
;)

我已经留下了所有相关的 console.log() 以帮助理解正在发生的事情。



有趣(？) 轶事:我今天浪费了 3 个小时，等待 GitHub 从 DDoS 攻击 对 Dyn，发布此答案。狗屎发生了! ;)