I have using Sortable JS to make my component sortable and dragable. but I found the new and old index still the same one when element dragged. The component look like this following sample:

bellow is label-content component

    <div class="label-content">
        <template for:each={contents} for:item="content">
            <c-label-content key={content.id}></c-label-content>

bellow is child component of label-content component, which is item-content

    <div class="slds-p-around_small">
        <template for:each={items} for:item="item">
            <c-item-content key={item.id}></c-label-content>

And bellow is initialize Sortable inside label-content.js component

initializeSortableJS() {
    let el = this.template.querySelector(".label-content");
    Sortable.create(el, {
        group: "label",
        animation: 150,
        onStart: (ev) => {
           console.log(ev.oldIndex); // return 1
        onEnd: (ev) => {
           console.log(ev.newIndex); // return 1 even I drop the element to third index

bellow the image what's component looks like


I was follow documentation on SortableJS here but it's still give the same value when onEnd event triggered.

Hopefully anyone can help me.. thanks in advance

New contributor
bagongpct is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Your Answer

bagongpct is a new contributor. Be nice, and check out our Code of Conduct.

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.