Differentiate between drop and sort in jQuery UI sortable()

I am using jquery UI draggable and sortable for drag and drop functionality. I am running a function when user drag a field into the droppable area. Here's my code

let initDrag = () => {
    $( ".draggable" ).draggable({
        connectToSortable: '.droppable',
        cursor: "crosshair",
        helper: "clone",
        opacity: 0.35,
        snap: true,
        refreshPositions: true
    })
}
let initSortable = () => {
    $( ".droppable" ).sortable({
        update: afterDrop
    });
}
let afterDrop = (event, ui) => {
    let fieldID = ui.item.attr("data-id");
    getFieldData(fieldID).then(fieldData => {
        fieldData[0].field.field_id = Date.now();
        formBuildingJSON.form_fields.push(fieldData[0]);
        console.log(formBuildingJSON);
    })
}

I want to only run this afterDrop() function when user drag the field in dropable area. But this function also fires whenever user sorts the element. So how can I detect whether the field has been dragged in or sorted. I am creating an array that store the id of all the dragged elements. Now when user sorts the elements I want this array to be reordered. How can I do this?

from Differentiate between drop and sort in jQuery UI sortable()