NgDraggable : 拖入嵌套放置答案

【问题标题】：NgDraggable : drag into nested dropNgDraggable : 拖入嵌套放置
【发布时间】：2016-09-24 13:55:00
【问题描述】：

我正在尝试使用 ngDraggable for angularjs 来构建界面构建器。

我的问题是，我无法将项目放入嵌套的可放置 div。

例子会更好。我的可拖动列表：

<div class="col-md-3 components-list">
    <div class="category ng-scope" ng-repeat="category in componentCategories">
        <h4 class="ng-binding">Containers</h4>

        <div class="drag-object ng-scope" ng-repeat="component in category.components">

            <h5 class="ng-binding">12</h5>
            <div class="component-content" ng-drag="true" ng-drag-data="component" draggable="false" style=""></div>
        </div>
        <div class="drag-object ng-scope" ng-repeat="component in category.components">

            <h5 class="ng-binding">6</h5>
            <div class="component-content" ng-drag="true" ng-drag-data="component" draggable="false"></div>
        </div>
    </div>
</div>

我的嵌套可放置容器：

<div class="col-md-9 builder-container" ng-drop="true" ng-drop-success="onDropComplete(container, $data, $event)"> <!-- Parent container -->

    <div ng-repeat="component in container track by $index" ng-drag="true" ng-drag-data="component" ng-drag-success="onDragSuccess(container, $data,$event)" >
        <div class="col-md-12" style="background-color:blue;min-height:100px;border:1px solid black">
            <div class="builder-container" ng-drop="true" ng-drop-success="onDropComplete(component.container, $data, $event)"> <!-- Child container -->
                <div ng-repeat="component in component.container track by $index" ng-drag="true" ng-drag-data="component" ng-drag-success="onDragSuccess(component.container, $data,$event)"></div>
            </div>
        </div>
    </div>
</div>

我希望能够在主容器或嵌套容器中放置一个项目。

任何想法都会有很大帮助... 谢谢！

【问题讨论】：

标签： javascript html angularjs drag-and-drop draggable

【解决方案1】：

我最近解决问题的方法是创建一个服务 (dragRegistrar)，您可以将项目的状态注册到该服务，然后在 dragenter 上分配状态，然后使用该服务与您希望该信息去往何处进行通信。

<div drag-directive="information">
    <p> stuff</p>
</div>
<div drop-directive="outer">
  <h1>Drop Stuff here.</h1>
  <div drop-directive="inner">
    <h2> or in here </h2>
  </div>
</div>


angular.module('app').directive('dragDirective', ['dragRegistrar', function(dragRegistrar){
  return {
    link: function(scope, elem, attr){
      var el = elem[0];
      el.draggable = true;
      elem.on('dragend', function(){
        moveInformationToThing(attr.dragDirective, dragRegistrar.thing);
        scope.$apply();
      });
    }
  };
}]).directive('dropDirective', ['dragRegistrar', function(dragRegistrar){
  return {
    link: function(scope, elem, attr){
       elem.on('dragenter', function(){
         dragRegistrar.thing = attr.dropDirective;
         scope.$apply();
       });
    }
  };
}]).service('dragRegistrar', function(){
  return {thing: null};
});

编辑： 我在处理这个问题时遇到的一个问题与指令中的一个元素有关，这会导致 dragleave 事件触发——即使该事件发生在指令的后代元素上。为了解决这个问题，我做了：

elem.on('dragleave', function(event){
  if(attr.myDropover === 'inner'){
    if(event.target !== elem[0]){ return; }
  }
});

【讨论】：