1

There is an object with arrays:

{ 
"array_1": [
   {item:"#1"},{item:"#2"},{item:"#3"},
 ],
"array_2": [
   {item:"#4"},{item:"#5"},{item:"#6"},
 ],
}

SortableJS perfectly modifies arrays on drag-n-drop. However, I'm trying to send information about the new item's position to the server and can't find the relocated object. The Object I try to build using "onEnd" event:

{item:"#1", list:"array2"}

There is a reference to the DOM element in the SortableJS custom event; a new index of the item is also there; BUT! nothing about the new group - array where the item was moved to.

The ideal solution: find a direct reference to an item (object) and array, editable from the Angular component. Plan "B" is to find the "new group" index to which the item was moved to.

halfer
  • 19,824
  • 17
  • 99
  • 186
Vlad Rovner
  • 194
  • 4
  • 11
  • some like this [SO](https://stackoverflow.com/questions/62437239/save-order-on-page-refresh-of-cdkdrag-cdkdroplist-angular-material/62438655#62438655) ? – Eliseo Jul 08 '22 at 06:09
  • Thank you for the feedback @Eliseo! The problem is that SortableJS does not contain a "container" prop. Guys are using "from" & "to" props BUT they refer to DOM elements and I'm searching for direct reference to Angular variables, similar to the ones you described in your comment about Angular native drag-n-drop events. – Vlad Rovner Jul 08 '22 at 18:09
  • Sorry, I don't know about Sortablejs. I go the instruction in this [link](https://github.com/sortablejs/ngx-sortablejs) (this is the [stackblitz](https://stackblitz.com/edit/angular-ivy-pxaxie?file=src%2Fapp%2Fapp.component.ts)) and look like work. see that it's **not** `import { SortablejsOptions } from 'ngx-sortablejs'; //WRONG` else `import {Options} from 'sortablejs';` – Eliseo Jul 11 '22 at 06:19

0 Answers0