标签: jquery-nestable

我的列表允许从子项移出子项,我想更改它.

如您所见,应允许将子项从父项内部移动到另一项父项,但不应允许在子项之外移动子项.

我认为代码太长了,所以这里是可嵌套列表,类似于我使用Luna主题的nestableList,这里是脚本jquery.nestable.js

我正在使用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来制作List.

所以我将在nestable onChange上创建一个ajax方法,将其保存在数据库中.

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

// activate …

我正在尝试使用可嵌套的jQuery创建嵌套列表，并在整个列表中禁用拖动功能。下面是我的html。

<div class="dd" id="nestable">
<ol class="dd-list">
    <li class="dd-item" id="no-drag">
        <div class="dd-handle">
            Foo
            <div class="pull-right action-buttons">
                <a class="blue" href="#">
                    <i class="ace-icon fa fa-pencil bigger-130"></i>
                </a>

                <a class="red" href="#">
                    <i class="ace-icon fa fa-trash-o bigger-130"></i>
                </a>
            </div>

        </div>
        <ol class="dd-list">
            <li class="dd-item" id="no-drag">
                <div class="dd-handle">
                    Bar
                    <div class="pull-right action-buttons">
                        <a class="blue" href="#">
                            <i class="ace-icon fa fa-pencil bigger-130"></i>
                        </a>

                        <a class="red" href="#">
                            <i class="ace-icon fa fa-trash-o bigger-130"></i>
                        </a>
                    </div>

                </div>
                <ol class="dd-list">
                    <li class="dd-item" id="no-drag">
                        <div class="dd-handle">
                            Baz
                            <div class="pull-right action-buttons">
                                <a class="blue" href="#"> …

<li class="dd-item" data-id="1">
<div class="dd-handle text">
<div class="inline w-200">Data Issued</div><div">Date</div>
<div class="dd-btn"><a data-toggle="modal" data-target="#myModal" href="#" class="btn btn-white btn-sm" aria-label="edit attribute"><i class="fa fa-pencil text-navy" aria-hidden="true"></i></a></div>
 </div>
 </li>

我试图在单击编辑按钮时打开一个模态，但按钮在可嵌套列表中不可点击

我正在尝试使用jQuery Nestable库,我必须将data-id和data-weight设置为我的列表元素.这是必需的列表架构:

<div class="dd" id="nestable">
        <ol class="dd-list">
            <li class="dd-item" data-id="10" data-weight="1">
                <div class="dd-handle">Item 1</div>
            </li>
            <li class="dd-item" data-id="29" data-weight="2">
                <div class="dd-handle">Item 2</div>
            </li>
            <li class="dd-item" data-id="58" data-weight="3">
                <div class="dd-handle">Item 11</div>
            </li>
        </ol>
    </div>

但是,每次我尝试为元素分配属性时,我都会收到以下错误:

Can't bind to 'weight' since it isn't a known property of 'li'.

这是我的nestable.directive.ts:

@Directive({ selector: '[uiNestable]' })
export class NestableDirective {
    constructor(el: ElementRef) {
        $(el.nativeElement).nestable({
            group: 1
        });
    }
}

任何帮助表示赞赏.