javascript - Angular 8 嵌套拖放

标签 javascript angular drag-and-drop

不幸的是,我找不到解决常见问题的方法。

这是代码的链接 https://stackblitz.com/edit/angular-ygwaxs

我有这样的场景:从服务器我得到了一个 json 树结构(在这个例子中有一个直接在组件内部的简化)

有空节点,但每个人都声明了他们的 child 数组。

我已经尝试在 html 级别使用 ng-template 和 ng-container 管理组件内部的这种表示,这是有效的。

问题是我需要使用拖放来对节点进行排序。

具体来说,每个部分都可以是子部分或父部分,因此每个部分都可以拖放。

我尝试使用 Angular Material 8 CDK 拖放(https://material.angular.io/cdk/drag-drop/overview)和使用拖放 API 的 vanilla Javascript(https://developer.mozilla.org/ …/…/API/HTML_Drag_and_Drop_API)来实现它,但是,如果在第一种情况,嵌套拖放无助于解决问题,在第二种情况下,我进行了测试,但在 Angular 组件内部,似乎不接受拖放 (drop) 事件绑定(bind);当我尝试将一个部分拖到标签放置区内时,光标会变为不放置状态。

谁能帮帮我?

最佳答案

我最近在树结构中的嵌套拖放/排序项目也遇到了问题。

我的解决方案是通过 cdkDropListConnectedTo 链接不同的 cdkDropLists,并通过 cdkDrag 项目上的 cdkDragMoved 事件获得目标放置位置。

演示:https://stackblitz.com/edit/angular-cdk-nested-drag-drop-tree-structure

关于javascript - Angular 8 嵌套拖放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59153753/

相关文章:

javascript - 用于内部链接的 MooTools Fx.SmoothScroll 在我的网站上不起作用

angular - 像 AngularJS 中的作用域注入(inject),用于更现代的库

简单拖放框的Android控件

javascript - Dojo 拖放 : how to retrieve order of items?

javascript - Select2 选项不随自定义滚动条滚动

javascript - 数组内关联数组

angular - 如何使用 angular2(ts) 进行 AJAX 调用?

javascript - 如何设计一个全局类来存储 Angular 中的设置?

javascript - html css 拖放悬停错误?

javascript - Node 中的 Bower 依赖波浪号