Is there a way to know what is the item that was dropped?

[jjreisfl]

I was going through the documentation and it was not clear to me if there was a way to know what is the new item that was dropped on a list. Is it possible to know?

[smnbbrv]

hi @jjreisfl

yes, it is. In case your item comes from the same sortable container then use onUpdate event (e.g. see example from demo https://github.com/smnbbrv/angular-sortablejs-demo/blob/master/src/app/examples/sortable-with-options/sortable-with-options.component.ts#L36)

This event will give you the oldIndex and newIndex properties (see https://github.com/RubaXa/Sortable). Using that you can take the item from your array that is located at newIndex, this will be your newly dropped element.

If you have two containers and you want to track cross-container drag-drop, you need to use onAdd event with the same logic like you do for onUpdate.

If you don't mind I will leave it open as another idea for improvement in v3.

[stevenlayne12]

Hi There

I came here with the same question as jjreisfl but when I try and get the item out of the array at that index, I get undefined and if I print the array at that point, It is empty. Would it be a problem if the array is passed as an Input to the component and I am defining the onAdd callback in ngOnInit?

Let me know if this is the right place for this and if I should attach some code.

[smnbbrv]

hi @t3rror23

try to log the array as console.log(JSON.stringify(your_array_here)). This will actually give you the best answer what is going on. If the array is empty here then something is wrong with passing it.

Just a random idea: do you use arrow function? Sounds like you have a wrong this inside your function

[stevenlayne12]

Hi @smnbbrv

So on further inspection and similarly to what you suggested, I printed out an enum value that was passed to the component as @Input() options: Options; when ever the onAdd() defined in ngOnInit() is called, It always prints the value that is passed to the last item defined in my template.

here is the onAdd this.options.sortableOptions.onAdd = (event: any) => console.log(this.options.additionalOptions.period);

on your random idea, I did notice that i was using this inside the anonymous function so I tried declaring options locally inside of ngOnInit() as const options = this.options; and using the local instance but I am still getting the same result

I understand now that this may be more related to my understanding of javascript and/or Angular and less to the sortablejs plugin but any assistance with this would be amazing

[smnbbrv]

Hi, would be super then if you create the stackblitz that reproduces the issue. It’s hard to help otherwise...