AngularJS拖放可编辑

AngularJS drag & drop editable

本文关键字：编辑拖放 AngularJS 更新时间：2023-09-26

我是AngularJS的新手，请从核心层面指导我。

我的要求是将项目（源）拖放到创建动态树结构（目标）中。请找到随附的屏幕截图。

在源代码中，我有需要拖动以形成动态树结构的项目列表，其中树中的所有节点都应该是可编辑的。

例1：创建/编辑树结构

步骤1）从源中选择项目并将其拖动到目标

步骤2）在目标端，将使用默认名称和时间戳创建产品目录。在"产品目录"下，将创建产品。将在"产品项"下创建。最后，所选项目将放在项目下，如屏幕截图所示。此类别下可以添加多个项目。

仅供参考：如果在产品级别删除所选项目，则会在同一产品目录下隐式创建另一个产品结构。

请让我知道推进它的方法。

谢谢

维吉

使用 HTML5 内容可编辑属性随时随地编辑页面内容，并确保对其进行控制（例如：管理员模式）

在角度控制器中使用控制标志以允许用户编辑内容。

对于拖放，您必须使用第三方插件，并且有大量可用的开源插件。

要使内容可编辑，

<p contenteditable="true">You can edit me!</p>

看在安格尔的份上，

<p contenteditable="isAdminMode">You can edit me!</p>

根据情况设置、$scope.isAdminMode = true || false。

此问题已修复。实际上，我们创建了默认的树结构，其中我们放置了一个选项来在每个子项和父项上创建节点以及删除选项。