我有两个简单的列表,我可以将问题拖入和拖出。每次我拖动其中一个问题,它就会改变它的#34; Active" status为true或false:
$scope.onDrop = function ($event, $data, array) {
if ($data.Active) {
$data.Active = false;
array.push($data);
}
else if (!$data.Active) {
$data.Active = true;
array.push($data);
}
};
这很好但我需要限制用户拖放到同一个列表中,因为它们也会触发onDrop函数。
我正在使用:http://angular-dragdrop.github.io/angular-dragdrop/
我刚开始拖放,但据我所知,文档是我必须使用拖动通道/拖放通道属性,但是我很难理解它们实际上是如何工作的。
在我的标记中,我有两个这样的面板:
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
Aktiva frågor
</div>
<div class="panel panel-body">
<ul class="dnd"
drag-channel="A"
drop-channel="A"
ui-on-drop="onDrop($event,$data,activeQuestions)">
<li ui-draggable="true" drag="aquestion"
on-drop-success="dropSuccessHandler($event,$index,activeQuestions)"
ng-repeat="aquestion in activeQuestions track by $index">
{{aquestion.Name}}
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
Inaktiva Frågor
</div>
<div class="panel panel-body" >
<ul class="dnd"
drag-channel="B"
drop-channel="B"
ui-on-drop="onDrop($event,$data,inactiveQuestions)">
<li ui-draggable="true" drag="iquestion"
on-drop-success="dropSuccessHandler($event,$index,inactiveQuestions)"
ng-repeat="iquestion in inactiveQuestions track by $index">
{{iquestion.Name}}
</li>
</ul>
</div>
</div>
</div>
我尝试了A和B的各种组合,但没有一种是有效的,所以很明显我似乎不理解它们的逻辑。
或者,如果这不是解决问题的最佳方法,请告诉我更好的方法。 :)
答案 0 :(得分:1)
通过将Active逻辑移到我的代码后来解决它。