Question

我正在尝试使用AngularJS创建一个实时HTML编辑器，用户可以将一些DOM元素拖放到容器中，它将呈现最终的HTML页面，例如，有一个按钮（或其他）表示＆＃34;拖动我创建一个输入＆＃34;然后用户将该项目拖动到容器中并输出一个输入字段......

我一直在尝试ngDraggable模块但不是我需要的......

我认为一种方法是将HTML代码保存到某个$scope变量中，当用户将按钮放入容器时，包含$scope.input的{{1}}将在容器内呈现...

我的最后一步是启用内联编辑以生成所生成的HTML元素，以便让用户再次创建最终模板的内容。

当用户完成时，整个HTML代码将保存在某处或下载...

我不需要复杂的东西，只需要一些可以删除的预定义元素......

我希望我能正确解释。

在http://nboychev.com/tests/angular/Drag%20Drop%20iFrame%20using%20Angular%20JS%20Directive.html找到的一些例子完全符合我的要求（参见来源），但是：

它使用的是jQueryUI（我不想使用它，但是如果它需要的话我会的话）

它不是在处理我的项目。我必须说我使用的是RequireJS，但是一切都适用于我的角应用程序，但上面链接中提到的指令。 Draggable不工作，我没有任何错误，我已经检查过代码正在执行，做一些console.log（）的东西，但仍然没有工作......

但它包含我想要的内容，注入HTML的可拖动内容在iframe（或div，或其他）上呈现内容，并且新内容也可以删除，以在该代码中插入更多内容。试一试，引导我一点。感谢

Answer 1

我认为如果你尝试使用jui

这样的东西会更好

另一方面，您可以尝试实现自己的指令：

 <br>
  <h4>Drop Area</h4>
  <div droppable jui-options="{addClasses: false}" class="drop-area"></div>

  <div class="read-out">
    <span class="text-info"><strong>Draggable ID</strong></span>: {{obj.id}}<br><br>
    <span class="text-info"><strong>Content</strong></span>: <span ng-bind-html="obj.content"></span><br><br>
    <span class="text-info"><strong>Actual Content</strong></span>: {{obj.content}}<br><br>
  </div>
</div>

http://codepen.io/m-e-conroy/pen/jCdhu

Answer 2

听起来像一个有趣的项目。

这是一个使用JqueryUI和Angular的简单链接函数。你需要一个带有类＆＃34; draggable＆＃34;的范围内的HTML元素。完成后使用destroy()。

从范围添加HTML到DOM，请查看Josh David Miller的解决方案：http://jsfiddle.net/paulocoelho/fBjbP/2/

或者对于可视化显示的简单HTML元素，您可以尝试使用ngBindHtml，ngRepeat和ngSanitize。然后在数组中添加/删除HTML元素应该在容器中显示它们。

link: function($scope, $elem, $attr){

  $elem.find(".draggable").draggable({
    start: function(event, ui){
      $(ui.item).addClass("shadow");
    },
    stop: function(event, ui){
      $(ui.item).removeClass("shadow");
      // DO SOME ANGULAR STUFF HERE
    }
  });
}

angularjs拖放html内容

2 个答案: