问题标签 [angular-dragdrop]

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 回答
100 浏览

javascript - 无法执行 div 元素的拖放

实际上我有这样的场景,我有四个 div 并且我应该能够交换 div 方块,这意味着我可以在没有任何错误的情况下相互交换 div 的位置。这样做时我的代码在我动态生成 div 时不起作用。如果我手动创建四个 div,那么代码有点工作。我附上了 stackblitz 链接。有人可以帮我解决这个问题吗..

请通过此链接> https://stackblitz.com/edit/angular-srvwgw

onDrop(event) { event.preventDefault();

}

我应该能够将 div 的位置与其他 div 交换。

0 投票
4 回答
1782 浏览

angular - 在 Angular Material CDK 拖放中,如何防止项目随着元素移动而自动重新排列?

提前致谢。这是问题:

我正在使用Angular Material CDK 拖放(版本:@angular/ckd:7.3.7)

文档说“项目将随着元素的移动而自动重新排列。

我的问题是:如何防止项目在元素移动时自动重新排列?

这是我不想要的动画 gif。这是我制作的棋盘,您可以看到“项目(棋子)随着元素(棋子)移动而自动重新排列”

这是我想要的动画 gif。我想要的是在元素(棋子)移动时不会重新排列项目(棋子)。

这是带有代码的stackblitz

0 投票
2 回答
1016 浏览

angular - 角度 cdk 拖放 - 如果验证返回 false,是否有任何方法可以在放置时进行异步验证并恢复?

当删除一个项目时,我希望能够执行一个异步调用(例如检查后端是否存在冲突、冲突等......),它返回真或假。如果为假,我想“反转”放置,以便该项目出现在原始数组中。

我在官方文档中找不到任何参考资料,因此对如何应对这一挑战的任何指针表示赞赏。

0 投票
1 回答
1210 浏览

javascript - Angular8 拖拽问题与拖拽有多种情况

我正在使用 Angular8 拖放并遇到一些问题

我的概念是什么,我在做什么

  1. 我在其中拖放交货的卡车
  2. 我拖放包裹的交付工作正常

我正在使用以下 JSON 数据结构(如下所示),它使用moveItemInArraytransferArrayItem功能进行了更新

一切正常,但我需要一些额外的东西来应用拖放,也就是说,

  1. 我希望将包裹直接放入卡车内......所以当包裹直接放入卡车时,我想在该卡车交付中添加一个交付对象,然后在该交付中,我想分配丢弃包

  2. 我希望将交付直接丢弃在交付中......所以当直接丢弃交付时我想将之前交付包的所有包裹移动到当前交付

我已经尝试了很多不同的东西,但是拖放会受到干扰并且错过行为

下面是我的 ts 和 HTML 模板代码

0 投票
2 回答
530 浏览

angular - 角度 cdk 拖放在延迟加载中不起作用

当它出现在 Angular 7 上时,我切换到延迟加载功能,在此之前,cdk 拖放曾经可以工作,现在它坏了。

我在代码中使用了一些共享模块来集中模块,例如,每当我需要模块 A,B,C 时,我只导入模块 D ,它本身会导入这些提到的模块。

我尝试在这些共享模块之一中导入位于@angular/cdk/drag-drop 中的 DragDropModule,但它没有用。

我还仔细检查了这些模块是否在任何地方都被导入。

请注意,我确保共享模块也已导出。

共享模块

在其他共享模块内部

0 投票
1 回答
1359 浏览

angular - 具有拖放功能的角垫树

我正在angular material flat tree使用drag and drop.

我使用来自 stackblitz linkdrag and drop的示例实现。

将父节点拖放到子节点时出现错误。

这是错误无法读取未定义的属性“findIndex”

这是我迄今为止的工作。提前致谢。

0 投票
0 回答
169 浏览

javascript - 在 iframe 中的子文档中拖放不起作用

我有一个使用 iframe(对象标记)的普通 html 应用程序中包含一个角度应用程序。在子角度应用程序中,我试图在输入元素(如文本字段)之间拖放文本。数据的拖动正在按预期进行。但是,在将其拖放到同一个子应用程序中的文本字段时,不会触发 drop 事件。我需要这个事件,因为我需要在将一些数据存储到生成的 iframe 之前对其进行操作

角组件 -

对于 elem2,在从 elem1 删除数据期间不会触发 drop 事件。

0 投票
0 回答
245 浏览

java - 如何使用 selenium webdriver 拖放 angularJS 元素

我需要使用 angula6 元素的 selenium webdriver 将元素从一个位置拖到另一个位置

我试过使用

动作动作 = 新动作(驱动程序);act.dragAndDrop(from, to).build().perform();

但它不起作用。

没有错误,但没有发生拖放操作

0 投票
1 回答
1715 浏览

angular - Angular CDK 在下拉列表之一中使用占位符拖放

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

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

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

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

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

0 投票
2 回答
1062 浏览

angular - cdkDragFreeDragPosition 位置取决于之前的每个 cdkDrag 元素

当我在页面上添加几个 cdkDrag 元素时,每个元素的位置都取决于前一个元素。查看我的屏幕,如果我将“项目 3”移动到容器的 0x0,“项目 3”坐标将为 -250x0。所以问题是:如何使每个元素的位置独立于先前的元素?例如,如果我为所有元素设置 x:0, y:0,则每个元素都必须在另一个元素之上。

当然我知道一种方法,通过计算位置取决于前一个元素的宽度和高度,但也许我们有更优雅和简单的方法?

这是我的代码:

在此处输入图像描述