我正在尝试使用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>
我希望能够在主容器或嵌套容器中删除一个项目。
任何想法都会有所帮助...... 谢谢!
答案 0 :(得分:0)
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; }
}
});