javascript - 尝试使用 html5 拖放创建 "folder-like"gui (Angular 4)

Question

我正在尝试开发某个使用 HTML5 拖放 API 的网络应用程序。我的应用程序应该让用户能够将项目拖放到某个“拖放区” block ，并且能够将项目拖到其他项目上以创建文件夹，文件夹上的项目，文件夹上的文件夹等等...... (当然在拖放区 block 内)。

我尝试使用 2 个项目数组，一个用于所有应用程序，一个用于选定的应用程序(已被拖到拖放区)。

Stackblitz 示例:https://stackblitz.com/edit/nested-drag-and-drop?file=src/app/app.component.html

卡在这里。

当您可以将一个应用程序拖到另一个应用程序上以创建一个新文件夹时，预期的输出应该像手机一样(当您可以将一个文件夹拖到另一个文件夹上以创建一个包含两者的大文件夹时，效果会更好一些)

Answer 1

我已经更新了你的 blitz , 只是在每个应用程序中添加了 event.stopPropagation(); 和 items 数组。