Angular drag and drop

Question

I have two simple lists that I can drag my questions to and from. Each time I drag one of the questions it changes its "Active" status to true or 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);
   }

};

This works great but I need to restrict the user from being able to drag and drop into the same list as they are dragging from since that also triggers the onDrop function.

I'm using : http://angular-dragdrop.github.io/angular-dragdrop/

I have just started out with drag and drop but from what I can tell of the documentation is that I have to use the drag-channel/drop-channel attributes , however I am having a hard time understanding how they actually work.

In my markup I have two panels like so:

        <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>

I have tried all kinds of combinations of A and B but none are working so obviously I seem to not understand the logic of them.

Or if this is not the best way to attack the problem please let me know of a better way. :)

Answer 1

Solved it by moving the Active logic into my code behind instead.