NgDraggable : 拖入嵌套放置

Posted 2023-05-08

【中文标题】NgDraggable : 拖入嵌套放置

【英文标题】：NgDraggable : drag into nested drop

【发布时间】：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>

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

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

【参考方案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; 
  
);