angular dragdrop drag across ng repeat elements

Question

here is the plunkr which will best illustrate my problem.

https://plnkr.co/edit/VrT7TmK6tY2u4k2NYJ2U?p=preview

there are two panels the panel on the left has a list of items that you can drag and drop onto wells on the right. the wells are created with a ng repeat. unfortunately I can not drag from one well to the another well on the right side of the screen. not sure why.

 <div ng-controller="oneCtrl"><!--one-->



              <div class="span3" style='margin-left:10px;'>

                <div class="thumbnail"
                data-drop="true" 
                ng-model='list1'
                data-jqyoui-options="optionsList1"
                jqyoui-droppable="{multiple:true}">



                    <div class="alert alert-info btn-draggable"
                      ng-repeat="item in list1"
                      ng-show="item.title" data-drag="{{item.drag}}"
                      data-jqyoui-options="{revert: 'invalid'}"
                      ng-model="list1" jqyoui-draggable="{index: {{$index}},animate:true}"
                      ><!--alert-->

                        {{item.title}}

                    </div><!--alert-->


                </div>
              </div>
              <div class="span3" style='margin-left:150px;'>

                <div class=thumbnail>

                   <div class="well"
                   ng-repeat = "org in orgs"
                    data-drop="true"
                    ng-model="org.list"
                    data-jqyoui-options="{accept:'.btn-draggable:not([ng-model=org.list])'}" 
                    jqyoui-droppable="{multiple:true}">

                    <div class=" alert alert-success btn-draggable" ng-repeat="item in org.list" 
                    ng-show="item.title" 
                    data-drag="{{item.drag}}"
                    data-jqyoui-options="{revert: 'invalid'}"
                    ng-model="org.list"
                    jqyoui-draggable="{index: {{$index}},animate:true}">
                      {{item.title}}
                    </div>

                </div>


                </div>


              </div>





      </div><!--one-->

and the javascript

var App = angular.module('drag-and-drop', ['ngDragDrop']);

App.controller('oneCtrl', function($scope, $timeout) {

  $scope.orgs = [
      {name: 'org1', list: []},
      {name: 'org2', list: []},
      {name: 'org3', list: []},

    ]


  $scope.list1 = [
    { 'title': 'Item 1', 'drag': true },
    { 'title': 'Item 2', 'drag': true },
    { 'title': 'Item 3', 'drag': true },
    { 'title': 'Item 4', 'drag': true },
    { 'title': 'Item 5', 'drag': true },
    { 'title': 'Item 6', 'drag': true },
    { 'title': 'Item 7', 'drag': true },
    { 'title': 'Item 8', 'drag': true }
  ];


});

score 1 · Accepted Answer · answered Jan 04 '18 at 17:41

That's because you have data-jqyoui-options="{accept:'.btn-draggable:not([ng-model=org.list])'}" for the repeater in the right panel. This selector is the same for all the generated droppable-zones and it controls which draggable elements are accepted by the droppable. You will be able to drag and drop the items between the generated zones, if you will remove this option (or modify it according to your requirements).

Working plnkr.

angular dragdrop drag across ng repeat elements

1 Answers1