Group pull clone problems about ngx-sortablejs

[smnbbrv]

Hi @kuba-010

sorry for a late answer. I think the reason is in the object you pass to the group property. The only thing I tested this was a string, so I can't really tell you what is the source of the problem here.

Did you manage to find a solution on that?

[kuba-010]

Nope, sadly not. I think it's to do with the source library and the set timeouts. I managed to force it to not error by rebuilding the source list after a timeout. Not a solution, or even a workaround really, but I think it shows something is happening to the source list.

It's pretty easy to replicate, create a new cli project, add sortablejs then stick this in as the html:

<h2>Copy From List</h2>
<div class="sortlist" [sortablejs]="items" [sortablejsOptions]="sourceOptions">
  <div *ngFor="let item of items">{{item.name}}</div>
</div>

<h2>Copy To List</h2>
<div class="sortlist" [sortablejs]="formula" [sortablejsOptions]="targetOptions">
  <div *ngFor="let item of formula">{{item.name}}</div>
</div>

then in the component:

sourceOptions:SortablejsOptions={group: { name: 'formula', pull: 'clone', put: false }, sort:false }
targetOptions:SortablejsOptions={group: { name: 'formula' }}

items=[
  {name:"Item 1"},{name:"Item 2"},{name:"Item 3"},{name:"Item 4"},
];
formula=[];

[fperezgaliana]

Hi!
I was having the same problem, and I thought that it could be an internal problem of the library while updating the arrays associated to the lists, so I tried not to use '[sortablejs]="items"' and use only 'sortable' and update the array manually by capturing an event. However, I couldn't get it working, when I pull an item from the source list, it gets duplicated in the destination container, but the strange thing is that, internally, the destination array is correct.

Basically, what I did in the HTML template file was:

    <!-- Source list -->
    <div id="luid1" class="card-collapse">
            <div class="list-group" sortablejs [sortablejsOptions]="opt_uid1">
              <a href="#" class="list-group-item list-group-item-action"
                *ngFor="let uid of uid1">
                {{uid}}
              </a>
            </div>
     </div>
    <!-- Destination list -->
    <div id="luid2" class="card-collapse">
            <div class="list-group" sortablejs [sortablejsOptions]="opt_uid2">
              <a href="#" class="list-group-item list-group-item-action"
                *ngFor="let uid of uid2">
                {{uid}}
              </a>
            </div>
     </div>

And, on the component TS file:

    uid1 = [ 1, 2, 3 ];

    uid2 = [ 4, 5, 6 ];
    opt_uid1: SortablejsOptions = {
      sort: false,
      dataIdAttr: 'uid1',
      group: {
        name: 'uid',
  		pull: 'clone',
  		put: false
      },
      animation: 150
    };
    opt_uid2: SortablejsOptions = {
      sort: true,
      dataIdAttr: 'uid2',
      group: {
        name: 'uid',
  		pull: true,
  		put: true
      },
      animation: 150,
      onAdd: (evt) => {
        // Manually update the destination list
      
        let sourceIdx = evt.oldIndex;
        let destinyIdx = evt.newIndex;

        // We get the item from the source list (this.uid1)
        let item = this.uid1[sourceIdx];

        console.log(this.uid2);   
        this.uid2.splice(destinyIdx, 0, item);   // We add the item to the list. It works fine, but visually we
        console.log(this.uid2);   // have 2 copies
      }
    };

Any ideas on this? Thanks in advance,

[sarawoods]

Hi @smnbbrv, has there been any progress on this? As @kuba-010 has mentioned, this happens in the simplest case of cloning - nothing weird going on so it should really be addressed. If there is no solution or workaround for this I will have to move away from using SortableJS which is a shame...

[smnbbrv]

Hi @sarawoods

I've become a happy father with all the consequences :) So I would not expect that much activity from my side in the closest future. Luckily, we are on github where everybody can make contributions - just find the problem, change the code and make a pull request.

[smnbbrv]

Fixed with 2.3.1, see https://smnbbrv.github.io/angular-sortablejs-demo/multiple-lists