问题标签 [ng2-dragula]

我正在努力将ng2-dragula绑定到AspNetCore SPA 模板。尝试了一切，但仍然得到：

有人在 AspDotnetCoreSpa 中使用过 ng2-dragula 吗？

dragula.component.html

dragula.component.ts

app.module.client.ts

app.module.shared.ts

似乎无法弄清楚为什么这不起作用。

因此，正如您在此 GIF 中看到的那样，我正在将一个 div 从一个容器拖到另一个容器，ondrop` 对象消失并且数组变得未定义。

这是我的代码：

主视图.html

主视图.ts

RequestsGrid<>.ts

该request-card组件只是一些样式，不包含任何代码。

正如您在中看到的那样，当我放弃时，Main View.ts我正在订阅该dropModel事件并注销以查看发生了什么。这里是上面拖动 GIF 的控制台输出：

知道为什么该项目会消失吗？

更新 Plunker：http ://plnkr.co/edit/U5AjZ0Gqnxq8bAznYueG?p=preview

我一直在尝试在我的 Angular 2 应用程序中使用 Dragula，但我无法让它工作。

这是我放在 app.module.ts 中的内容

在我使用 Dragula 的组件中，我以这种方式导入它：

这是我试图在视图中构建的简单东西，但它不起作用：

我尝试从“ng2-dragula”、“ng2-dragula/ng2-dragula”和其他一些我在网上找到的解决方案中导入它们，但到目前为止还没有运气。当我尝试 console.log DragulaModule 和 DragulaService 以查看是否找到它们时，DragularService 返回一个带有内容的函数，而 DragulaModule 返回一个空函数。

这是我在控制台中遇到的错误：

我在 Angular 2 应用程序中使用了 Dragula，我想知道是否有办法让文本保持可选状态，所以像可拖动元素内的跨度一样，仍应保持默认行为，因此您可以突出显示其上的文本。据我所知，在dragula选项中似乎没有办法。也许有人知道简单的方法？

我从数组中自动生成不同的容器，这是我的 app-component.ts：

第二个数组：

在我的 app-component.html 我有这个代码

这些生成一个 5 列，左侧为 columnsItem，右侧为 4 列，我想允许从左列拖动元素到右侧的每个列，我使用 html 标签创建标题和类“no-拖动”使标题不可拖动，两个问题：

• 我怎样才能固定标题元素，我的意思是防止将元素放在标题上，我只想将元素放在标题上方？
• 另外我想为右边的每个容器只放置一个元素，右边的每个容器应该只有一个元素，限制放置多个元素。

谢谢

我是一名新开发人员，也是 Ionic 的新手。

尝试集成 Dragula 模块，我让它能够重新排序我的元素，但 CSS 在拖放之间丢失。（一旦你放下它又回来了）。

我已经阅读了文档和其他人的问题，并将其范围缩小为可能的“德雷克”并设置了 mirrorContainer（因为 document.body 不起作用）？由于我要重新排序的项目不是构建时 DOM 的一部分（扩展列表项时显示的 get）。

正如我所说，我对这一切都很陌生，并且无法弄清楚在哪里以及如何为此编写实际代码。任何有关书面示例的帮助都会很棒。

我的代码如下。

应用程序.html

app.component.ts

我在我的 Ionic 项目中使用 Dragula。这很好用，我可以在顶部面板和底部面板之间拖放项目。

我现在正在尝试使用内置的 Ionic Slides 功能（https://ionicframework.com/docs/api/components/slides/Slides/）用滑块替换底部面板。这意味着我可以以轮播方式并排显示他们，而不是列出玩家列表。

当我使用此代码时，滑动工作（我可以左右滚动以显示更多玩家）但是当我尝试拖动一个人时<ion-slide>，会选择所有 11 个玩家的整行。

如何设置 Dragula 以便可以拖动单个玩家？

如果有帮助，我的game.ts文件是：

我正在 Angular 中设计一个 Web 应用程序，我的项目中包含了 Dragula。它适用于在“包”中拖放东西，但我想要更强大的拖放功能。

有没有办法允许一个<div>包含可拖动项目的项目，让这些项目被放置在容器内的任何地方？也许甚至允许它们相互重叠？

假设容器 div 为 500x500px，内部 div 为 50x50px。我希望能够将一个拖到容器的左上角，另一个拖到右下角。我尝试定义 div 宽度，更改包中的元素无济于事。

我也会将其他与 Angular 兼容的框架视为选项。

我有树结构的拖放选项，但由于某些功能，所有节点都被设为兄弟节点，因此我们可以将任何节点设为父节点。

我正在使用 Dragula ng2-dragula进行拖放。

如果我拖动父级，我需要将所有子级与父级一起移动（在放下父级后移动子级就足够了）。

HTML

当我在 ts 文件中手动修改结构数组时，视图没有更新。

TS 文件

我试过了

也是。如果我有单独的按钮和绑定单击事件，则视图正在更新。任何形式的帮助都会很棒。

编辑：添加了Plunker链接

编辑关于问题标题更改

原来的问题标题是这样的：

Angular 2/4 Observable - 如何修改在订阅内发出值的对象而不触发更多事件？

经过不是问题原因的广泛调查，但这里的评论中有关于如何解决该特定问题的建议。实际问题与同时拥有多个 ng2-dragula 订阅者有关，因此我更新了问题标题以反映这一点。

我正在使用 ng2-dragula 插件并订阅 dropModel 事件。

我面临的问题是，在订阅代码中，我需要通过重新排列模型中的其他项目来修改模型。这会导致 dropModel 再次触发 dropModel 事件 - 它显然认为因为我更改了用户执行拖放操作的列表中的模型位置，而不是我的代码。

我尝试了 take(1) 但这并没有解决问题 - 它只是不断地接受一个事件，所以当我在订阅中更改模型时，显然它会再次接受下一个 (1)。

这是代码：

理想情况下，我想“抓取”第一个放置事件（用户发起），然后在订阅代码中，取消订阅或停止接收更多事件，然后处理模型，最后重新订阅。

我知道这有点奇怪——在订阅异步代码中，我需要以某种方式“暂停”订阅。尽管“暂停”并不完全正确——我实际上想以某种方式阻止触发新事件，直到我完成对当前事件的处理。暂停只会导致我处理自己的事件（如果有意义的话）。这可能吗？

笔记

dragula 在这里绑定的模型是 itemsControls 的动态数组，而不是通常意义上的纯数据模型。因此，为什么我要从表单控件中提取数据并插入到实际的数据模型中。

更新 1

我决定记录 Dragula 对绑定的 itemsControl（AbstractControls 数组）所做的事情。

在拖动之前，我记录了数组中的实际内容：

在 dropModel 订阅处理程序中，我记录了一个“dropped”事件和数组的长度。这是我拖放任何项目时的输出，始终是相同的输出：

但是，如果我删除上面发布的代码（即，我不会触及底层数据模型），则输出如下：

因此，至少这证明了通过重新排序数据，我不仅会导致更多事件触发（正如我所怀疑的那样），而且还会产生奇怪的副作用，即控件数组的长度正在增加和减少（不知道为什么会这样） .

鉴于此输出，我需要一种仅对发出的最后一个事件采取行动的方法。

有没有办法只从 Observable 获取最后一个事件？

更新 2

据此，这里真正的问题是 ng2-dragula 不支持将 dropModel 绑定到 FormArray。但似乎有一种解决方法......仍在寻找！