4

I have a requirement to use nested ng-dragula in AngularJS 2 for the below nested student list items.

Student 1 book1 book2 book3

Student 2 book4 book5 book6

Student 3 book7 book8 book9

I have to drag and drop Student position, which i am able to do it with the below code.

<div [dragula]='"student-bag"' [dragulaModel]='studentList'>
     <div class="row" *ngFor="let student of studentList; let stud = index">
        ...
     </div>
</div>

I have to drag & drop the books with in student as well as between students. Something like below.

Student 1 book1 book3 book2

Student 2 book4 book5

Student 3 book7 book6 book8 book9

I tried the below code

<div [dragula]='"student-bag"' [dragulaModel]='studentList'>
     <div class="row" *ngFor="let student of studentList; let stud = index">
        ...
        <div [dragula]='"book-bag"' [dragulaModel]='student.books'>
             <div class="row" *ngFor="let book of student.books; let bk= index">
              ....
             </div>
        </div>
     </div>
</div>

however book item is not draggable either within student or between students. please suggest.

Vipin
  • 781
  • 1
  • 10
  • 19

1 Answers1

1

Just had the same question. The answer lies in move. See https://github.com/bevacqua/dragula/issues/31

  var drake_books = dragula({
    isContainer: function (el) {
      return el.classList.contains('student');
    },
    moves: function(el, container, target) {
      return target.classList.contains('book');
    }
  });
Manuel
  • 9,112
  • 13
  • 70
  • 110
  • why do i just get a sticky to my mouse that won't drop with every single one of those hundreds of identical solutions? `TypeError: sourceModel.splice is not a function` – tatsu Jun 29 '18 at 14:24
  • Did you add DragulaModule to your @NgModule imports in your app.module.ts? – Phil O Jun 03 '19 at 13:14
  • Looks like setOptions is deprecated or changed now ? I can't seem to get mine working on a simple nested list. Here i have my stackblitz. Any help is appreciated https://stackblitz.com/edit/ng2-dragula-vukxda – HariHaran Jul 30 '19 at 05:27