Jquery UI Sortable execute function on drop outside or inside the same list

Question

I am working with Jquery ui sortables. I have made bootstrap cards sortable in a table. When i drop a card i want a to execute a function.

This works fine when using receive function however this doesn't fire when i move my .sortable down or up in the same cell. Only if i drop it on another cell.

Using the function update does trigger my function when dropping it in the same cell but fires twice when dropping it in another cell (once for updating the table it moved from and once for updating the table it moved to.)

Using the function start executes the code too early and i won't be able to figure out where it dropped into.

Using the function stop gives me the same information as start but when i drop it instead of grab it.

My HTML

<table class="table table-bordered table-striped table-responsive" id="myTable">
    <thead>
        <tr id="kentekens" class="sticky-top">
            <th scope="col">Dag</th>
        </tr>

    </thead>
    <tbody>
        <tr id="maandag">
            <th scope="row">
                Maandag
                <p id="DMonday"></p>
            </th>
                <td class="td flex-nowrap">
                    <div class="card" style="background-color:white; width:15rem">
                        <div class="card-body">
                            <h6 class="card-title"> text </h6> 
                                <p class="card-text" style="white-space:nowrap"> text </p>
                        </div >
                    </div >
                </td>
        </tr>
        <tr id="dinsdag">
            <th scope="row">
                Dinsdag
                <p id="DTuesday"></p>
            </th>
                <td class="td flex-nowrap"></td>
        </tr>
        <tr id="woensdag">
            <th scope="row">
                Woensdag
                <p id="DWednesday"></p>
            </th>
                <td class="td flex-nowrap"></td>
        </tr>
    </tbody>
</table>

My Script

                $('.td').sortable({
                    connectWith: ".td",
                    dropOnEmpty: true,
                    receive: function (e, ui) {
                            var x = e.target.parentElement.rowIndex;
                            var y = e.target.cellIndex;

                            var monteurId = table.rows[0].cells[y].querySelectorAll('#monteurId')[0].value;
                            var planDatum = table.rows[x].cells[0].querySelectorAll('#DMonday, #DTuesday, #DWednesday, #DThursday, #DFriday, #DSaturday, #DSunday')[0].innerText;
                            var bonId = e.originalEvent.target.parentElement.querySelectorAll('#bonId')[0].value;

                            console.log(monteurId + ' ' + planDatum + ' ' + bonId)
                        }
                    }

So in short what happens now is i move the card to another cell and the console logs the right information. However when i move it within the same cell above or below another card nothing gets triggered.

update gives me the correct information but fires twice onces with data from the cell it was in

start and stop both fire onces but give me information of the cell it was in not the cell it moves to.

What i would like to happen is When i drop the card within the same cell or to another cell fire my function once and only with the information of the cell it was dropped into.

Answer 1

For anyone running into the same problem.

As i am using this in a table and i know what x and y coordinates in that table i am dropping my sortable i can check if the card i dropped is at these x, y coordinates.

As update fires twice when moving from one sortable list to another i just check if its actually in the list of the x, y coordinates it is firing from.

Because the card has already been dropped into the new list it's no longer there so i don't execute the first code.

                        var z = table.rows[x].cells[y].querySelectorAll('#actualId');
                        var test = false;

                        for (var i = 0; i < z.length; i++) {
                            if (z[i].value == actualId) {
                                test = true;
                            }
                        }

                        if (test) {
                            console.log(monteurId + ' ' + planDatum + ' ' + bonId)
                        }