问题标签 [angular-dragula]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
916 浏览

typescript - ng2-dragula 单向拖动和限制袋子中的元素数量

我在一个项目上遇到问题。

我目前正在使用 ionic 开发移动应用程序。在此应用程序中,您可以选择要在主页上显示的小部件列表。

选择要使用的小部件后,您可以更改它们的组织布局。这是我目前正在处理的部分。

我使用 ng2-dragula 来使用拖放功能。

屏幕分为 4 行 3 列。当您按下包含小部件预览 ( )div的按钮时,会显示一个隐藏的+<img src="...">

目前,所有这些都运行良好,但我想限制用户与之交互的方式。

这是用户按下按钮时弹出的菜单代码+

这是用户应该在其中放置他想要显示的小部件(模块)的网格:

如何限制一个包中的物品数量?我怎样才能得到一个包id

我正在考虑自定义我的accepts功能,但我仍然不明白如何访问包的id 例如,如果我有这样的 HTML:

我如何告诉 Dragula 只允许将元素从 firstBag 放到 secondBag ?

0 投票
1 回答
490 浏览

angularjs - AngularJS-Dragula 嵌套列表

TL;博士;
我需要拖入嵌套列表,但无法正常工作。我在Plunkr编译了一个简单的例子。

我有没有定义深度的动态嵌套集,我只需要能够在它们自己的父容器中对它们进行排序。但是由于父母也被拖着走,所以每当你拿起一个孩子时,整棵树都被拖着走。

文档提到使用该函数moves创建一个句柄,这可能会帮助我,但我从来没有从那个函数中得到日志,也没有从accepts函数中得到日志。

我已经尝试使用$postLinkand 一个 watcher on$scope.$$dragula来确保它被启动,甚至是一个 watcher on dragulaService.find($scope, self.item.id)。都没有奏效...

0 投票
0 回答
228 浏览

javascript - 更新到 ng2-dragula 2.0 不起作用

我已经在 Google 上搜索了这个,但没有找到工作的“解决方案”,并且是从 2016 年开始的。我在 1.x 上运行良好,但现在我正在尝试按照迁移指南更新到 2.0。

我在 HTML 中有这样的设置,其中包含两个包含列表的引导卡:

但是,当我尝试编译它时,我得到:

我已按照我的应用程序模块中的描述导入:

列表的数据在我的组件中:

如上所示,我已将语法更改为 [(dragulaModel)]html 中的。

在这一点上,我迷路了。

0 投票
0 回答
568 浏览

angular - 使用 ng2-dragula 在 mat-grid 中拖放 mat-card

我有一个 6 个网格,它依赖于传单阵列。在那个网格内,我的每张传单都有卡片。我想将我的卡片的位置从一个瓷砖更改为另一个瓷砖。

我正在使用 ng2-dragula 并经历了所有的事情。

我的问题是,当我从一张牌中拖出一张牌时,它会转到另一张牌上,但该牌上的现有牌没有占据前一张牌的位置。

我已经通过添加我有导入传单组件的瓷砖组件来实现这一点。然后我使用图块中的文本字段来映射传单数组中的传单位置,如果传单中没有位置,我将用空白卡填充该图块。

请帮我完成这件事。我将非常感激。有没有其他方法可以做到这一点?我正在尝试使用https://valor-software.com/ng2-dragula/中提到的所有内容,但没有任何效果。

下面是我的代码。

光栅组件.ts

光栅组件.ts

0 投票
2 回答
1465 浏览

angular - 类型“NodeList”上不存在属性“forEach”

我在我的表中使用 ng2-dragula 进行拖放。

突然之间,它开始给我一个错误,即“'NodeList'类型上不存在属性'forEach'。”。在它工作正常之前我没有做任何改变。

0 投票
1 回答
925 浏览

angular - 如何进行水平拖动和替换

用例描述: 我正在尝试对三列使用拖放来更改它们的顺序(水平切换它们的位置)。我尝试了演示页面中的第一个示例,但就我而言,我只想水平拖动,我的标记如下所示:

它确实相对有效,但仅适用于从右到左拖动,而不是相反的方式(从左到右)。有什么办法可以实现吗?

0 投票
1 回答
281 浏览

angular - Ng2-Dragula: Enable drag at run time

So, I have this following template.

The function cssClass sets the class based on the type of imageCard. So it is set to draggable and non draggable based on the type of image Card. Now, I want the child component to be draggable only if its property isSelected is true only after long press and this is done dynamically. How can I achieve this ? How to make child component draggable at run time ?

Thank you.

0 投票
1 回答
138 浏览

angular - ng2-dragula - 仅对特定目标使用复制功能?

如何复制某些东西而不是仅在将其拖动到特定目标时才移动它。

我有 4 个容器,我想在将某些东西拖到容器时将值复制到容器中。对于所有其他容器,我只想将值从源移动到目标(这是默认行为)。

ng2-dragula 文档中的copy函数只有elementandsource作为参数,但没有目标。

我如何实现这一目标?

0 投票
1 回答
3781 浏览

angular - 在同一文件中的另一个组件中使用一个组件的变量

我在同一个文件中定义了两个组件,并试图将一个组件的一个变量访问到另一个变量中,并得到了这个 答案,但是get SomeValue()当我尝试引用它时,该函数没有出现在另一个类中。

在提供的链接上给出答案:

导入-->演示

我可以使用共享服务,但不想仅将它用于一个变量。

我从那个答案中遗漏了什么?

0 投票
0 回答
183 浏览

javascript - Angular Dragula:拖放后如何在保存按钮上获取更新排序列表

我正在从数据库中获取具有排序顺序的帖子列表,并使用 ng-repeat 行与表绑定。我对它们进行了设置,因此您可以使用 Angular Dragula 拖放来重新排序它们。这工作正常。拖动后,每当我单击保存按钮时,我应该得到更新的排序顺序,以便我可以在数据库上更新它。

拖动前:

假设 post_sort_order:1,2,3,5

拖动前

拖动后:拖动后

post_sort_order:4,2,3,1

HTML:

Javascript:结果:vm.GroupsData.groups:

API 响应

现在,一旦我点击保存按钮,我应该得到更新的排序列表,如这里 4、3、2、1。

实际 post_sort_order:1,2,3,5

预期 post_sort_order:3,1,5,2

有没有办法获取更新列表?如果是,请告诉我。提前致谢。