问题标签 [angulardraganddroplists]

该应用程序（AngularJS 1.5.11，https: //codepen.io/loenko/pen/qPOWRp ）是具有可拖动项目的列表组（使用相应包https://github.com/marceljuenemann/中的 dnd-list 指令实现角拖放列表）。

所有三个列表中的项目都来自同一个项目对象数组。通过对项目的“列表”属性进行过滤，它们被放入相应的列表中。

问题在于拖放项目后对列表内的项目进行排序。它们应该（我希望它们被）准确地放置在它们被丢弃的位置，但它们会自动排序（被丢弃的项目被推到列表的末尾）。

有没有办法在不创建任何额外的排序数组、更改 d'n'd 实现包和更改数据模型（它是预定义的）的情况下实现此类功能？

无论如何，我会感谢所有替代解决方案！

列表的结构如下：

数据模型为：

我正在使用angular-drag-and-drop-lists并有一个我希望重新排序的简单项目列表。

我有这个工作，但我希望能够捕获正在移动的项目的旧索引位置和新索引位置。

我已经尝试使用dnd-moved并dnd-inserted按照下面的代码进行此操作。

标记：

控制器：

我发现的问题是移动和插入停止时的输出索引值不是我所期望的。

我想我可能会遇到文档中提到的 dnd-inserted 属性的内容：

请注意，对于同一列表中的重新排序，旧元素仍将在列表中，因为尚未调用 dnd-moved

所以考虑一下我有四个项目添加到我的列表中。

然后我将“考文特花园”移到“滑铁卢桥”所在的位置：

控制台输出正确显示它是从索引 0 移动的，但说是在索引 3 处插入的（我希望它会说 2）

该dnd-inserted函数在之前被调用dnd-moved，它遵循我在上面从文档中进一步引用的引用。

如果我向另一个方向移动项目，从下到上，我会看到与捕获的索引类似的行为。

所以开始如下：

我将“Blackfriars”移动到“Southwark”所在的位置：

控制台输出内容如下：

我希望看到它已从索引 3 移出。

我可能误解了使用这个库的一些基本知识。是否有一种干净的方法来跟踪项目的旧索引位置和新索引位置，这些索引位置已被删除\插入到该库的垂直列表中？

谢谢

我正在使用angular-drag-and-drop-lists，这是使用传统拖放的另一种形式，如图所示：

HTML 源代码是：

在 .js 中，我像链接中的示例一样加载 codecs_models 变量。看：

但我不知道如何使用 Selenium Python 进行测试，例如将 g729（来自禁用列表）放入启用列表。因为 Disabled 和 Enabled 词在 ng-repeat 中（它是动态的）。

任何想法？提前致谢。

我正在使用角度拖放列表，我有一些项目列表。我想将项目从“位置 A”拖放到“位置 B”。“位置 B”位于页面底部。需要滚动IE浏览器。 但是开始拖动时它不滚动。在 chrome 中，它工作正常。我能做些什么？

请检查这个 IE 浏览器

更新：

我创建了一个stackblitz来重现这个问题。

考虑我拥有的以下静态模板：

我希望能够自由地重新排列两列以及两列之间的面板。相反，我可以拖动面板，但只要我放下一个，什么都没有发生，它会回到原来的状态。

猜测是因为后面没有数据模型。在example*ngFor中，可拖动的 div 通过数组呈现在页面上。还有一个drop(event: CdkDragDrop<string[]>)绑定到它们的组件方法，每次下降时更新数据模型。

但我的问题是，我不仅有可以放入某个数组的如此简单的列表元素，而且还有网站的整个部分，里面有很多我想拖动的 HTML 代码。

我怎样才能为它创建一个数据模型？（如果真的缺少 Angular）

我有 2 个数组。我正在实现一个 Angular 拖放，我想使用 FormArray 来保存元素被放入其中的数组。

问题是我无法将 formcontrol 应用于 div，因为它给出了错误

错误：没有名称的表单控件的值访问器：“语言”

这是html

我想通过拖放角度的 CDK 来更改列表顺序。它适用于我网站上的任何页面，但是当我在材质对话框中使用它时，它不起作用。当我将一个列表项拖到另一个项目上时，它不会在拖动时改变位置，也不会在放置时改变。有什么特别的事情可以让它在对话框中工作吗？

我正在尝试的最简单的代码：

HTML

ts文件

app.module.ts

正如我所说，这段代码可以在任何页面的任何地方工作，但是当我将它复制到对话框组件时它不起作用

我有两个带有可拖动<li>项目的无序列表。我希望这些项目在另一个列表的项目上是可拖放的，并获取被拖动项目的 id 和拖放<li>项目的 id 。目前我可以通过这样做获得被拖动项目的元素ID 。是否可以获得已删除项目的元素的 id？<li><li><li>event.item.element.nativeElement.id

我发现了很多关于如何使用不同的可拖动指令的简单示例，但现在我想以编程方式执行此操作。有一个最小的示例应用程序可以演示该问题。它接收“dropped”事件，但 previousIndex 和 currentIndex 始终相同。

https://stackblitz.com/edit/angular-8-drag-and-drop-dynamic-components

单击添加按钮几次，然后尝试移动它们。

我正在为Angular CDK拖放的以下用例苦苦挣扎：我希望第二个下拉列表在组件加载时是一个包含空元素的数组（因为我希望那里有许多可以被元素替换的占位符从第一个列表中拖动）。

我在这里创建了一个沙箱：https ://codesandbox.io/embed/angular-iiuhq?fontsize=14

我认为代码可以作为想法（尽管由于某种原因我无法让它在沙箱中工作）。唯一的问题是拖拽是超级不自然和波涛汹涌的。我希望占位符保持可见，直到我将元素拖动到它上面，然后消失在拖动的元素下方。现在，似乎被拖动的元素左右或上下推动其他元素，然后占位符之一消失。

也许你们有一个我没有想到的更好的方法。

另外，我知道该*cdkDragPlaceholder指令，但对我来说，如何在其中一个下拉列表中使用它并使占位符始终可见（因此不仅在拖动事件开始时），我并不明显。