I am creating simple sortablejs list that can add new element after the current element and change the position. when I drag and change element to last element and add new element will add new element to the top of the element. but I want to add that below the current element.
import { Component } from '@angular/core';
import { Options } from 'sortablejs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'my-app';
items = [1, 2, 3, 4, 5];
items2 = this.items.slice();
draggableOptions: Options = {
onUpdate: (event) => {
let newArr2 = this.items.slice();
let newEle = this.items.splice(event.oldIndex, 1)[0];
this.items.splice(event.newIndex, 0, newEle);
},
onStart: (event) => {
// ExcelStore.dispatch({type: ExcelAction.SECTION_DRAG_START, payload: {dragIndex : event.oldIndex}});
},
sort: true,
};
addNew(item) {
let currentIndex = this.items.indexOf(item);
console.log(item);
this.items.splice(currentIndex + 1, 0, item + 15);
//this.items.push(item+15)
}
checkIndex(item) {
console.log(this.items);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<h2>Drag / drop the item</h2>
<div [sortablejs] [sortablejsOptions]="draggableOptions">
<div *ngFor="let item of items" style="border: 1px solid" >
<h4>{{ item }}</h4>
<button (click)="addNew(item)">Add new</button>
<button (click)="checkIndex(item)">check index</button>
</div>
</div>