问题标签 [angular-cdk-drag-drop]

现在，我正在我的 Web 应用程序项目中执行从图像目录到画布的图像拖放操作。到目前为止，该代码作为在 PC 上运行的 Web 应用程序运行。但是，我发现当我通过包括 I-Phone 6S 和三星 Android 在内的移动设备运行程序时，我的拖放代码不起作用。

在PC上工作的源代码如下所示：

拖动部分：image-directory.component.html 和 image-directory.component.ts image-directory.component.html 部分：

我已将 cdkDrag 设置为任一或 <img .../> 但它未能拖动选定的单个图像。它宁愿将整个内容移动到 div 中。尝试将 cdkDrag 设置为正常工作需要我设置导出类，其中包含单个图像的固定列表，以便在 image-directory.component.ts 部分中拖动，这不容易完成。

image-directory.component.ts 部分：

放置部分：sketch.component.html 和 sketch.component.ts

sketch.component.html 部分：

sketch.component.ts 部分：

问题是图像目录部分不能有一个固定的数字来根据 Angular CDK 文档创建图像对象数组。

我该如何处理这些问题，以便我可以使用 Angular CDK 的拖放函数和变量在我的 Web 应用程序中使用。任何可行的替代方案将不胜感激。

顺便说一句，我虽然使用角度版本 10。

使用 Angular，我试图将一个 cdkDrag 项目（一个图标，而不是文本）拖到一个文本区域并在放置点插入文本。我的问题是，我无法获得项目在 textarea 中放置位置的适当索引。

我试图通过单击时使用 selectionStart 来找到插入符号的位置，但这只是每次都给我行尾的位置。当您简单地将项目拖入时，它不起作用。任何帮助将不胜感激。

我对 Angular 的 Drag'n'drop 有问题，确切地说是 DropZone。

TL;博士

Angular CDK Drag'n'Drop 中的 DropZone 仅适用于非滚动容器。如果它有滚动条，则必须使用 cdkScrollable，但这会使列向 4 个方向移动。这不包括它在粘性标题上的使用 - 尝试使用拖放操作以滚动到表格的最开头结束。

结构：

棕色容器有overflow-x 和overflow-y。高度设置为屏幕高度的 100%，其中宽度与内容匹配。

橙色的位置：相对。就这样。

蓝色容器包含带有表格标题的 div，位置为：sticky，并在滚动时悬停在表格上。我用它来模拟具有粘性行为的表格标题。由于对表格中任何位置（固定、粘性、绝对）的支持有限，我不得不这样做。

绿色是一个包含数据的表格。

问题：

我的任务是准备一个列与内容匹配的表格。需要能够使用拖放重新排列列。我努力的结果是上面的结构，它没有给人留下深刻的印象，但它确实有效。但是，有一个问题——如果屏幕很小并且列很多，则在抓取元素并将其移动到屏幕边缘后需要自动滚动。我用粉红色标记了浏览器中当前显示的内容。

解决方案原来是cdkScrollable，我用滚动条添加到主容器中，即棕色框架。不幸的是，有一个错误阻止我完成任务 - cdkScrollable 在 4 个方向上滚动。因此，如果我在表格的中间并且我决定更改列的顺序，cdkScrollable 会在屏幕顶部的滚动区域中捕捉到我，这使我回到表格的最开始。

我尝试了什么：

1. 带有中和 cdkScrollable 的 scrollTop 事件侦听器

它不起作用，因为 cdkScrollable 在 ngZone 中引入了 EventListener。结果，我们有两个监听器——一个加/减scrollTop，另一个将它返回到之前的状态。结果，整个表闪烁

2. 拖动时关闭滚动

没用的。关闭溢出只会隐藏滚动，而不是滚动机制本身。滚动机制不能关闭，只能阻止特定的用户动作（例如触摸移动），但是当cdkScrollable有事件监听器时，该方法不起作用。

3. CDK 拖放插入点

即使它在文档中（https://material.angular.io/cdk/drag-drop/overview#drag-preview-insertion-point）我也无法将它与代码连接起来。也没有使用示例。从 github 上的信息来看，有计划添加此选项，但最终放弃了，转而支持自定义类。

4. 编写自己的滚动条

有效，但 DragZone 等于当前显示屏幕的宽度（紫色）。卷轴内的所有内容都被忽略；dragzone 不随屏幕移动。我怀疑放置是从 body 元素中计算的，所以不可能选择超过屏幕宽度。在下图中，1270 是鼠标相对于整个屏幕的当前位置。超出此区域的唯一方法是将鼠标放在浏览器之外。

5. 重写 CDK Drag'n'drop 以获得所需的功能

我想过一个绑定到@Host 的指令，但CDK 代码是一场噩梦。在不知道依赖关系的情况下，我发现这是不可能的。

你知道如何解决它吗？

我正在开发一个角度应用程序。我在我的应用程序中使用拖放来重新排序列表。代码如下：

https://stackblitz.com/edit/angular-drag-drop-sortable?file=app%2Fcdk-drag-drop-sorting-example.html

零件：

html:

CSS：

我希望每当我拖放一个项目时，我都希望将它的名称放在一个变量中。就像如果我拖放“第一集 - 幻影威胁”，那么我想将“第一集 - 幻影威胁”存储在一个变量中。我在 event.currentIndex 中有 currentIndex 但我怎样才能得到这个名字？

有谁知道如何使用 HTML 或角度 CDK 库创建动态占位符？

我尝试过使用 CDK 库，但无法获得合适的占位符。

如果我使用一些静态 div，那么我的布局会中断，而拖动只需要创建一些动态 div 或某种占位符。

目前，我正在拖动另一个 div 的 div 顶部，但预期的右框应仅向左移动，底部和左侧框应仅向右和底部移动。

ts.文件

预期的用户界面

我将 cdkList 作为父组件，它有一个子组件，其中元素被包装在标签中。我的问题是，有时当我拖动元素时，会抓取底层链接，而不是拖动/抓取子元素/组件（下图）。当我将标签更改为 div 或问题消失时。因为这些应该充当链接，所以我不能这样做。我也尝试过使用 cdkDragHandle 并且问题更加频繁。

这是父母：

这是孩子：

关于问题的图片：

我正在尝试在不从拖动列表中删除项目的情况下进行拖放。我遵循了一个示例工作演示并尝试重现相同的内容。不幸的是，它不起作用，我发现发出了 cdkDropListDropped 事件。您可以在此链接中找到问题有问题的演示

我想像Working demo一样实现

请告诉我我错在哪里。

使用 Angular Material 的 cdkDrag 指令时，Quill 编辑器没有聚焦或无法键入内容。

这里我分享 StackBlitz 代码。

https://stackblitz.com/edit/angular-ivy-xalouc

理解：

• 如果右键单击编辑器，它是可编辑的
• 单击任何工具栏菜单项，它是可编辑的

请建议解决此问题。提前致谢。

当我在数据对象数组上使用拖放时，我无法使 cdkDragHandle 工作。怎么做？

我正在创建一个显示卡片的网络应用程序。当我将一张卡片从一个地方拖到另一个地方时，我希望该卡片即使在页面刷新后也留在那个地方，我正在使用 bootstrap4 卡片如何在没有 Jquery 的情况下对卡片进行排序我如何实现这一点，我已经调查过了但没有可用。