角度拖放

时间:2015-03-03 08:33:35

标签: angularjs drag-and-drop drag

我有两个简单的列表,我可以将问题拖入和拖出。每次我拖动其中一个问题,它就会改变它的#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的各种组合,但没有一种是有效的,所以很明显我似乎不理解它们的逻辑。

或者,如果这不是解决问题的最佳方法,请告诉我更好的方法。 :)

1 个答案:

答案 0 :(得分:1)

通过将Active逻辑移到我的代码后来解决它。