问题标签 [ng2-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 投票
0 回答
1205 浏览

angular - 在封闭的材料手风琴中拖放

我在另一个动态手风琴里面有一个动态手风琴,我ng2-dragula用来在手风琴之间拖放元素,所以这是我的手风琴:

生成的手风琴将如下所示:

上面代码的结果

在这种情况下,如果我尝试将项目从第二个父手风琴拖到第一个手风琴上,它将无法工作,因为第一个父手风琴已关闭。它应该打开,然后拖放就可以了。

我的问题是,我可以以某种方式在封闭的手风琴中拖放元素,而不用关心打开它吗?

谢谢!

0 投票
0 回答
902 浏览

angular - Angular Dragula - 分别造型过境和镜子?

我正在使用 nagular/dragula 并试图实现一种效果,即预期的放置位置由插入线而不是空框发出信号。但不知何故,当我.gu-transit像这样设计该元素时:

它也会影响.gu-mirror元素(拖动助手) - 它获得相同的高度。是否可以将这两者分开,还是模块的当前限制?

0 投票
1 回答
916 浏览

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

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

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

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

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

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

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

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

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

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

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

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

0 投票
1 回答
670 浏览

javascript - ng2 - Dragula 动画和样式未正确导入

我设置了 Dragula,并且大部分都按预期工作,但样式和动画与示例页面上的内容不匹配。在演示页面上,当您开始拖动项目时,您的鼠标将移动该项目的半透明副本,直到您释放它。当我单击并拖动一个项目时,没有半透明副本,并且它不会移动,直到我在新位置释放该项目时它会按预期移动。

我已经看到了关于这个问题的一些讨论(herehere),并仔细检查了是否在我的索引页面和angular-cli.json页面上包含了css(也尝试了两者,一次只尝试一个没有效果)。

CSS:

角-cli.json

html:

0 投票
1 回答
350 浏览

angular - 如何使用 ng2-dragula 从行中拖动多个彼此相邻的项目

我正在尝试从彼此相邻的行中拖动多个项目并拖放到另一行并使用 ng2-dragula 将其他项目放置在该位置上的项目重新填充该位置,我得到了将项目拖动到另一个的结果行,但拖动项目后,它的位置仍然是空的。请帮我解决这个问题或指导我如何使用 angular 2 ng2-dragula 完成此任务,或者是否有任何其他选项可以实现此目标。

如您所见,这里是空的地方,我想用放置其他物品的物品重新填充该地方。

0 投票
0 回答
442 浏览

angular - 基于 ng2-dragula 的网格有什么问题?

我想使用 ng2-dragula 来构建基于拖放网格的体验。似乎 ng2-dragula 是要走的路。

我将它导入到一个空白项目中,如果我有一个简单的垂直列表(如下)。它工作正常。

在此处输入图像描述

现在,如果我想让它成为一个水平列表 - 拖动已经有轻微的延迟或不精确:

在此处输入图像描述

最后,如果我把屏幕保持得足够小,让它变成一个网格——体验会更糟;(它不精确,而且很难拖放。

在此处输入图像描述

问题: - 是否可以将 ng2-dragula 用于网格用例?文档对此没有示例或指导。我想念什么才能使它真正起作用?

我的空白应用代码如下:

0 投票
1 回答
170 浏览

angular - ng2-dragula 与 ngb-tabset 不兼容

我正在开发一个系统,我使用 tabset 系统在 SPA 中显示内容。但是在某些页面中,我必须使用 ng2-dragula 来实现拖放系统,如下面的代码所示。

(忽略非结束标签,我没有插入它们以优化阅读,但它们存在于代码中)

我正在经历的问题是,拖动的项目将是不可见的,直到我将鼠标悬停在外部选项卡上,这让我想到 Dragula 不会在同一个视图中渲染两次,或者至少在它被分成“两个”视图时不会渲染。从理论上讲,当我将鼠标悬停在外部选项卡上时,它会呈现当前选项卡(我在其中拖动了一个项目)。

我试过设置<ngb-tabset [destroyOnHide]="true">无济于事。

检查.ts下面的页面。

任何帮助将不胜感激。谢谢你的时间。

0 投票
2 回答
1479 浏览

angular - 使用 angular5 和 ng-bootstrap 创建拖放排序列表

我的大部分应用程序都在工作,最后一部分是显示用户可以按不同顺序重新排列并以新顺序保存的项目列表。我一直在使用 angular5 (cli) 和 ng-bootstrap 进行开发。

如何创建这样的列表?我看到 ngx-bootstrap ( https://valor-software.com/ngx-bootstrap/#/sortable ) 是可能的,但我真的不想改变,因为我快完成了。有没有办法使用 ng-bootstrap 来实现这一点?

编辑以添加示例数据

数据具有这种结构(对象数组):

从 html 中调用

我希望用户能够重新排列名称列表并将其反映在底层数据模型中。

0 投票
1 回答
709 浏览

javascript - Dragula 和 Angular 5 - 通过拖放更新对象位置值

我有一个带有多个 div 的包,其中每个 div 都有一个项目列表,这些项目都具有相同的位置值,所以“杂项”div 的项目都具有“位置:杂项”,“盔甲”div 的项目都具有有“位置:盔甲”等

我可以将项目分类到各自的 div 中,但我希望能够将项目拖到另一个 div,然后相应地更改项目的位置值,但我不知道该怎么做。

我尝试了这个解决方案,但我一定没有正确理解它。

代码片段 - 这只是控制台“未定义”

HTML:

TS:

0 投票
2 回答
157 浏览

angular - Angular Dragula - 放置时不更新 Firebase

我有一个 AngularFireList 项目。

我将项目拆分为数组,并根据每个项目的位置值(对应于 div 的 ID)使用它们为一个 Dragula 袋填充多个 div。

将一个项目放入另一个 div 时,拖动项目的位置值将更新为新 div 的 id。所有这一切都按预期工作,但项目位置值的更新没有保存到 Firebase,所以当我检查项目时,我看到了更新的值,但如果我刷新页面,什么都没有保存。

我哪里出错了?

HTML:

TS: