0

I feel like I have to be missing something simple. I'm trying to build a fairly simple application using Angular's DragDropModule. I just want to transfer items from one cdkDropList to another. I found something online that does something similar and got it functional. But when I'm trying to adapt my own code, I keep getting an error that tells me currentArray.splice is not a function.

I've got the code over on stackblitz.

I have my code up top and the test code I found down below. You'll note that the test code works as expected whereas mine throws the error. The only thing I am seeing that is different is that I'm storing string values in my array and they are storing number values, but I have to be missing something else. Anyone who can point me in the right direction would be appreciated. Thanks!

Community
  • 1
  • 1
Kris Bishop
  • 3
  • 2

1 Answers1

0

The errors are pointed in the code below:

 <div 
    id="scripture" 
    cdkDropList 
    [cdkDropListData]="words" <==== The square brackets around  [cdkDropListData] and the correct list name
    cdkDropListConnectedTo="wordbox"
    (cdkDropListDropped)="wordDrop($event)">
    <div 
      class="word-container unselect"    
      *ngFor="let wd of words">
      {{wd}}
    </div>
  </div>
  <div 
    id='wordbox' <=== the correct id is wordbox, instead of wordbank
    cdkDropList 
    [cdkDropListData]="wordbank" <==== The square brackets around  [cdkDropListData]
    cdkDropListConnectedTo="scripture"
    (cdkDropListDropped)="wordDrop($event)">
    <div 
      class="word-piece unselect"
      *ngFor="let wd of wordbank" 
      cdkDrag
      cdkDragBoundary=".drop-targets"
      [cdkDragData]="wd">
      {{wd}}</div>
  </div>
julianobrasil
  • 8,954
  • 2
  • 33
  • 55
  • 1
    Thank you so much. I am very disappointed in myself for missing the brackets. I spent way more time than I care to admit trying to figure out why this wasn't working and comparing it against the code that was working. "words" is actually not the correct list. What I was originally trying to do was make each "word" a drop target, but I was failing to get that to work so I thought I would try using a secondary hidden list. I might go back now and play with cdkdroplistgroup to see if my problem was really all because I forgot to include the square brackets. – Kris Bishop Mar 31 '20 at 16:42