Question

我正在尝试使用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>

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

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

Answer 1

They way I solved the problem recently was to create a service (dragRegistrar) that you register the item's state to and then assign the state on dragenter, then use that service to communicate where you want that information to go.

<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};
});

Edit: One of the problems I had when dealing with this had to do with an element within the directive would cause the dragleave event to fire-- even though the event was taking place on a descendant element of the directive. To get around this, I did:

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

NgDraggable：拖入嵌套的drop

1 个答案: