Handling overlapping events in jquery drag and drop

Question

I am developing an application using jQuery UI to create a user interface where items can be both sortable and draggable across containers. Specifically, the key features of my application include:

Items can be dragged and dropped across different containers, and they can also be dragged and dropped onto other items

Sorting functionality is implemented to change the position of items within the same container.

However, I am facing an issue when handling droppable events while sortable is active. Sometimes, the droppable event is triggered for both containers, leading to the event being processed twice in two different droppables

I am looking for a way to separate droppable events so that I only receive an event corresponding to the drag-and-drop or sortable action that I am performing.

Has anyone encountered a similar issue or does anyone have a solution to help me address this situation? Thank you!

My html structure is as follows:

        $(".droppable-container").droppable({
            accept: ".day-content-item",
            drop: function (event, ui) {

            }
        });

        $(".day-content-item").droppable({
            accept: ".day-content-item",
            drop: function (event, ui) {}
      
        });

        $( ".connected-sortable" ).sortable({
            connectWith: ".connected-sortable, .day-content-item",
            stack: ".connected-sortable .day-content-item",
            stop: function (event, ui) {
  
            },
        }).disableSelection();

.day-content {
    flex-grow: 1;
    padding: 5px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.day-content-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #e7e7e7;
    gap: 8px;
    line-height: 24px;
}

<div class="day-content droppable-container connected-sortable custom-scrollbar draggable ui-droppable ui-sortable" data-value="2024/01/11"> 
<div class="draggable-item day-content-item day-content-item-outside-month ui-droppable ui-sortable-handle" > </div> 
<div class="draggable-item day-content-item day-content-item-outside-month ui-droppable ui- sortable-handle" > </div> 
</div>