gpt4 book ai didi

javascript - Angular 拖放列出单独容器中的项目

转载 作者:行者123 更新时间:2023-12-02 14:51:14 26 4
gpt4 key购买 nike

我使用angular-drag-and-drop-lists处理拖放操作的指令。我填充与实际项目分开的组。当我将项目拖到 ul 元素上时出现问题,项目消失。 Here是一个指向 plunker 的链接,让您能够明白我的意思。

下面是我的代码:

<ul ng-repeat="group in groups"
class="groups"
dnd-list="items">
<li class="title">{{group.name}}</li>
</ul>

<ul class="items">
<li class="item"
ng-repeat="item in items"
dnd-draggable="item"
dnd-moved="items.splice($index, 1)"
dnd-effect-allowed="move">
{{item.name}}
</li>
</ul>

最佳答案

嗯,文档说您需要在目标列表上设置一个 dnd-list,并且您还需要自己渲染该列表:

https://plnkr.co/edit/9OTy70KZZwavIWClIgvY?p=preview

<ul ng-repeat="group in groups" dnd-list="group.items" class="groups">
<li class="title">{{group.name}}</li>
<li ng-repeat="item in group.items">{{ item.name }}</li>
</ul>

还有...

$scope.groups = [
{
name : 'Group 1',
items: []
},
{
name : 'Group 2',
items: []
},
{
name : 'Group 3',
items: []
}
];

顺便说一句,我必须感谢您向我介绍这个伟大的图书馆!

关于javascript - Angular 拖放列出单独容器中的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36172675/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com